Question

I currently have a large result set in a table where I am applying and removing a class of ‘hidden’ (display:none) to certain rows based on other filters within the page. I’m able to get tablesorter working with the zebra widget, but when I try to include tablesorterPager on it, the script dies without any errors.

I’ve tried removing the ‘hidden’ class from the table rows, and it limits the results, but doesn’t create the pagination controls and if you try to sort, the results disappear and the script dies.

$('table').tablesorter({
    widthFixed:true,
    widgets: ['zebra']}
).tablesorterPager({
    container: $("#pager")
});

That’s the code that’s called on document ready.

At any given time, here’s a few sample rows of data (pre-tablesorter):

<tr class="place hidden">
    <td class="name">Sample Row 1</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>
<tr class="place">
    <td class="name">Sample Row 2</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>
<tr class="place hidden">
    <td class="name">Sample Row 3</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>

Answer 1

You have to add the complete pager DOM structure as so:

  <div id="pager" class="pager">
<form>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/first.png" class="first"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/prev.png" class="prev"/>
  <input type="text" class="pagedisplay"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/next.png" class="next"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/last.png" class="last"/>
  <select class="pagesize">
    <option selected="selected"  value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option  value="40">40</option>
  </select>
</form>

Also note that the zip I downloaded did not contain any of the image files since the ‘icons’ folder is missing. Also annoying was the fact that the zip contained svn repo folders. So you have to add this ‘icons’ folder and the image files within. You can download the images files from the tablesorter example page for the pager. I also had to set my path directly to the images (notice in my code sample I do that). Good luck!