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>

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>

• javascript
• jquery
• jquery-plugins
• pagination
• tablesorter

• Do you have your table rows in a tbody, a thead for your sortable rows and your pager form floating outside of the table? – iivel Commented Mar 15, 2011 at 13:06

2 Answers 2

You have to add the plete 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!

            this.construct = function(settings) {

            return this.each(function() {   

                config = $.extend(this.config, $.tablesorterPager.defaults, settings);

                var table = this, pager = config.container;

                $(this).trigger("appendCache");

                config.size = parseInt($(".pagesize",pager).val());

                $(config.cssFirst,pager).click(function() {
                    moveToFirstPage(table);
                    return false;
                });
                $(config.cssNext,pager).click(function() {
                    moveToNextPage(table);
                    return false;
                });
                $(config.cssPrev,pager).click(function() {
                    moveToPrevPage(table);
                    return false;
                });
                $(config.cssLast,pager).click(function() {
                    moveToLastPage(table);
                    return false;
                });
                $(config.cssPageSize,pager).change(function() {
                    setPageSize(table,parseInt($(this).val()));
                    return false;
                });

This is the constructor for the tableSorter Pager plugin. As you can see it binds click functions to elements based on the config (cssFirst, cssNext, cssPrev, cssLast ). Unfortunately this means those elements must already exists in the container defined by 'config.container' This doesn't seem to be documented anywhere on the pager plugin site. But you must define (in html, or with javascript before the call to the pager function) elements with the following default classes:

            cssNext: '.next',
            cssPrev: '.prev',
            cssFirst: '.first',
            cssLast: '.last',

I'm not sure how the table sorter will interact with your hidden rows, you may need to make some modifications to the core tableSorter functionality to get the behavior you're looking for.

/Chris