Laravel Snappy works great, but trying to fix this
The headers are good, but the table itself is not splitting and starting underneath the headers of the second page. Is this fixable? I am using the adminLTE theme.
Seen this page, but this does not solve it for me: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2367
Current code:
<table class="table table-striped table-bordered tree">
<thead>
<tr>
<th></th>
<th>Cables</th>
<th>Customer</th>
<th>Supplier</th>
<th>Load in</th>
<th>Load out</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
</tr>
</tbody>
</table>
.tree {
page-break-inside: avoid;
}
add this code in style. Hope that will be work
.page-break {
page-break-after: always;
}
.page-break:last-child {
page-break-after: avoid;
}
Related
i build crm system,
i had object hes name users he hold also the data from details table (one to many realation)
lets says i had nested object name user and he had more than 1 object of details
i want to get this in the end in thymeleaf table
name | entry date
david | 5/6/22
david | 1/7/22
but i got
name | entry date
david | 5/6/22 , 1/7/22
this is table code on thymeleaf:
<table class="table w-75 table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col" class="text-center">First name</th>
<th scope="col" class="text-center">Entry Date</th>
</tr>
</thead>
<tbody>
<tr th:each="users : ${ParkingUsers}">
<td class="text-center" th:text="${users.firstName}" />
<td class="text-center" th:each="date, i: ${users.parkingDetails}"
th:text="${(i.index > 0 ? '' : '') + date.entryDate}" />
</tr>
</tbody>
</table>
how can i fix that?
thanks
This is a good candidate for using the Thymeleaf th:block tag.
You can place the outer loop (for users) in this tag, and then place the inner loop (for parking details) in the <tr> tag.
Example:
Assume we have two classes:
public class User {
private String firstName;
private List<ParkingDetail> parkingDetails;
// getters and setters
}
And:
public class ParkingDetail {
private LocalDate entryDate;
// getters and setters
}
And assume we have a list of users: List<User>.
We can use the following in our Thymeleaf template:
<table class="table w-75 table-striped table-dark table-hover">
<thead>
<tr>
<th>First name</th>
<th>Entry Date</th>
</tr>
</thead>
<tbody>
<th:block th:each="user : ${users}">
<tr th:each="parkingDetail : ${user.parkingDetails}">
<td th:text="${user.firstName}"></td>
<td th:text="${parkingDetail.entryDate}"></td>
</tr>
</th:block>
</tbody>
</table>
This will generate the following HTML:
<table>
<thead>
<tr>
<th>First name</th>
<th>Entry Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>david</td>
<td>2022-06-05</td>
</tr>
<tr>
<td>david</td>
<td>2022-07-01</td>
</tr>
</tbody>
</table>
The th:block tag allowed Thymeleaf to iterate over the list of users, but it did not cause any HTML to be generated. The Thymeleaf ${user} variable created in the th:block tag can be referenced in all the child tags inside the th:block.
There are various other examples of how th:block can be used, in other questions on this site - so if this does not meet your needs, you can research those other questions.
I'm facing an issue with checking the checkbox on the edit page using Livewire. I've tried many ways but still not able to check the old selected value
View Code:
<table id="branches" class="table table-bordered table-sm" width="100%" cellspacing="0">
<thead>
<tr>
<th width="10%">
</th>
<th>Branch ID</th>
</tr>
</thead>
<tbody>
#foreach ($propertiesOptions as $key => $property)
<tr>
<td>
<input class="branchCheckbox"
type="checkbox"
wire:model="propertyIds.{{$property->id}}"
value="{{$property->id}}" #if(in_array($property->id,$propertyIds)) checked #endif>
</td>
<td>{{$property->id}}</td>
</tr>
#endforeach
</tbody>
</table>
Backend Code:
public $propertyIds, $propertiesOptions;
public function mount($record)
{
$this->propertiesOptions = Properties::where('merchant_id',$record->id)->get()
$this->propertyIds = $record->properties->pluck('property_id')->toArray();
}```
updated
And can you check if this correct? wire:model="propertyIds.{{$property->id}}"? Try to delete the wire:model .
<input class="branchCheckbox" type="checkbox"
value="{{$property->id}}"
#if(in_array($property->id,$propertyIds)) checked #endif>
`<table id="branches" class="table table-bordered table-sm" width="100%" cellspacing="0">
<thead>
<tr>
<th width="10%">
</th>
<th>Branch ID</th>
</tr>
</thead>
<tbody>
#foreach ($propertiesOptions as $key => $property)
<tr>
<td>
<input class="branchCheckbox"
type="checkbox"
wire:model="propertyIds"
value="{{$property->id}}" >
</td>
<td>{{$property->id}}</td>
</tr>
#endforeach
</tbody>
</table>`
BACKEND
public $propertyIds, $propertiesOptions;
public function mount($record)
{
$this->propertiesOptions = Properties::where('merchant_id',$record->id)->get()
$this->propertyIds = $record->properties->pluck('property_id')->toArray();
}
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Tmp</th>
</tr>
</thead>
<tbody>
#foreach($data as $row)
<tr>
<td>{{$row->temp}}</td>
</tr>
#endforeach
</tbody>
</table>
Above Example, if the temp value greater than 40, what is the easiest and best way give a specific color for Temp
#if($row->temp>'40')
<td bgcolor="#dd2c00">{{$row->temp}}</td>
#endif
This worked for me.
I am looking for a very simple data grid plugin for jquery that will allow me to do the following
populate it
order columns a->z and z->a
add rows on the client
I am using asp.net mvc on the server side.
DataTables is pretty straightforward and easily configurable:
http://datatables.net/
Their examples page lists a number of ready to go implementations.
I've been working with jquery.tablesorter. API is pretty clear; you can override the sorting function to provide custom sorting. In this example, notice that i have a grouping header as well, for which I can disable sorting.
<div style="width: 1024px; overflow: scroll">
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th colspan="2">Skill</th>
<th colspan="2">Resource</th>
<th colspan="2">Project</th>
<th>Role</th>
</tr>
<tr>
<th>Skill</th>
<th>Complexity</th>
<th>Bill</th>
<th>Joe</th>
<th>Project 1</th>
<th>Project 2</th>
<th>Role 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>.Net</td>
<td>2</td>
<td>1</td>
<td>3</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>UX</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>WCF</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
(function ($) {
$(document).ready(function () {
$("#myTable").tablesorter({
headers: {
0: { sorter: false },
1: { sorter: false },
2: { sorter: false },
3: { sorter: false }
}
});
});
})(jQuery);
jqGrid is probably the best grid plugin out there, it should do all you need above, and provide ample room for growth down the road if needed.
http://www.trirand.com/blog/
jsGrid is a really lightweight and customizable jQuery grid plugin http://js-grid.com/
I using datatable plugin (datatables.net) with code below
How can i click anywhere in datatable to get image id
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th></th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td><img id='1' href='#' src='Images/details_open.png'/></td>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td><td><img id='2' href='#' src='Images/details_open.png'/></td></td>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
</tbody>
</table>
Thanks very much
I use another way to resolve this problem :
I set hiden colum and use function :fnGetData to get id from this hiden row.