I have tablesorter and pager working together and had no problems so far.
Only thing that I can't manage to do correctly is update the pager after a search.
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>Al</td>
<td>18</td>
<td>Germany</td>
</tr>
<tr>
<td>BAl</td>
<td>19</td>
<td>Italy</td>
</tr>
<tr>
<td>CAl</td>
<td>99</td>
<td>Sweden</td>
</tr>
<tr>
<td>DAl</td>
<td>65</td>
<td>Australia</td>
</tr>
<tr>
<td>EAl</td>
<td>1</td>
<td>Germany</td>
</tr>
</tbody>
I initialize the sorter and the pager to display only 2 rows per page, but after searching for 99 year old person still pager will show 1/3 and not 1/1 which is the correct!
Pager still works, is that visual total page count that is wrong!
Any tips?
I am not sure if this will help or not, but I have it working on mine.
Super important note, all the examples the Official Sorter page has does not use a ID of the table, it just says any table tag. (add the # to the reference)
$("#caseInfoTable").tablesorter({widthFixed: true, widgets: ['zebra']});
$("#caseInfoTable").tablesorterPager({container: $("#pager"), positionFixed: false});
[1]
In the jquery.tablesorter.pager.js file I added these two lines at line 110...
c.pagerPositionSet = false;
fixPosition(table);
Those 2 go right before the line
updatePageDisplay(table);
[1] https://forum.jquery.com/topic/jquery-problem-with-tablesorter-pager-plugin-there-should-be-an-option-to-turn-off-absolute-positioning-of-pager-container/
Related
I tried to include the Column Selector Widget to a table and it didn't work. After a couple of hours i found out that in the demo file itself and the the given html template it differs. On the working demo the table begins with two header rows:
<tr class="tablesorter-ignoreRow hasSpan" role="row">
<th colspan="2" data-column="0" scope="col" role="columnheader" class="tablesorter01e6b87093a1e8columnselectorhasSpan" data-col-span="3">Student</th>
<th colspan="3" data-column="3" scope="col" role="columnheader" class="tablesorter01e6b87093a1e8columnselectorhasSpan" data-col-span="4">Courses</th>
</tr>
<tr role="row" class="tablesorter-headerRow">
<th data-priority="critical" data-column="0" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" style="user-select: none;" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort"><div class="tablesorter-header-inner">Name</div></th>
...
</tr>
but in the HTML template it is instead only one header row
<table class="tablesorter custom-popup">
<thead>
<tr class="tablesorter-ignoreRow"> <!-- Ignore all cell content; disable sorting & form interaction -->
<th data-priority="critical">Name</th>
So if i get it right, the template cannot work at all, because the first (and here the only!) header row has a "tablesorter-ignoreRow"-class given.
When using the sourcecode of the page it now works for me mostly, but the colspan of the first row which includes "student" and "courses" is now confusing me. Is it right that i have to set the colspan and data-col-span-values to the highest possible number of columns in it?
Thanks for any help!
I discovered that when loading bootstrap more than once the selector just doesn't work. Also when you mix bootsrap libs. So far I have not found the real problem. So I would search for the load order of the bootstrap libs
I am new to thymeleaf. I am trying to iterate two objects at a time on table. Because i am getting value from two objects.
I tried my way but it not working properly.
<tbody th:each="trn,iterStat : ${avngs}">
<tr th:each="emp,iterStat : ${list}">
<td th:text="${emp.name}">Name</td>
<td th:text="${emp.address}">VPA</td>
<td th:text="${emp.accountno}">Accont No</td>
<td th:text="${trn.daylimit}">Yes</td>
<td th:text="${trn.weeklimit}">Yes</td>
<td th:text="${trn.monthlimit}">Yes</td>
</tr>
</tbody>
Here, emp.name,address,accountno are getting correctly. But trn.daylimit,weeklimit,monthlimit are getting only same to remaining records
What is wrong in my code?
Make some meaning out of this. I have two lists, part1 and part2, I get values of part 2 from the index of part 1. This considers that your part 1 and 2 are supposed to display values in a linear - side by side manner. I got my parts by splitting a string.
<tr th:each= "part1, status : ${part1}">
<td th:text="${status.index + 1}"></td>
<td th:text="${part1}"></td>
<td th:text="${part2.get(status.index)}"></td>
</tr>
I have my grails view, and using a api rest I Receive an array of items,that I put in a table,and I want to make the pair rows with tr class="alt">
I want for first for second ,and so on.
I was thinking to do that with a or creating a tag,but don´t know really if there is something useful that can use for similar cases.
The tr that I want to change In the code is as
<table id="customers">
<tr>
<th>Foto</th>
<th>Nombre</th>
<th>Vendedor</th>
<th>Precio</th>
<th>Estado</th>
<th>Ciudad</th>
</tr>
<g:each in="${results}">
**<tr >**
<td><img src="${it.thumbnail}"></td>
<td>${it.title}</td>
<td>${it.nombre_vendedor}</td>
<td>${it.price}</td>
<td>${it.condition}</td>
<td>${it.address.state_name}</td>
</tr>
</g:each>
</table>
<g:each in="${results}" status="ix">
<tr class="${ix % 2 ? 'light' : 'dark'}">
<td>...
</tr>
</g:each>
I'm new to dart so this might seem like a silly question but I'd like to apply different CSS to different rows based on column values:
<table id="requests">
<tr>
<td>Title</td>
<td>Status</td>
<td>Date</td>
</tr>
<tr>
<td>Foo</td>
<td>Approved</td>
<td>Date</td>
</tr>
<tr>
<td>Bar</td>
<td>Denied</td>
<td>Date</td>
</tr>
<tr>
<td>Ipsum</td>
<td>None</td>
<td>Date</td>
</tr>
</table>
So far I can do this:
queryAll("tr td").classes.add("foo");
But I'm wondering how to get all rows whose columns have the value "Approved".
Here is a quick dirty way to do it from code:
querySelectorAll('tr').where(
(tr)=> tr.children.any(
(td)=>td.text == 'Approved'
)
)
.forEach((approvedTr)=>approvedTr.classes.add('approved'));
But i really recommend you to use a databinding framework (like Polymer, or AngularDart) to set different styles/classes depending on data. It's far more easy to use.
[A new thread was opened about doing this using Polymer]
I have the following table structure inside a view which gets displayed in the _Layout view in place of #RenderBody
<table>
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
</tr>
</tbody>
</table>
In my _Layout page, I want to apply the contextMenu event to the th elements, however, being a beginner, I'm having a hard time figuring the selector for the same.
Some combinations that I've tried -
I have a reference to my table in a variable called oTable
oTable.$('tr th').contextMenu ....
oTable.$('thead tr th').contextMenu ....
$('table.tableID th').contextMenu ....
None of them are working. Any suggestions?
If you simply want to select ALL of your th elements then you don't need anything more complicated than this:
$('th').contextMenu ....
If your table has an id associated to it then the following will allow you to target just that table:
$('#yourid th')