Search code examples
jquerytablesorter

Problems with TableSorter Initial Number of Visible Rows

I discovered TableSorter yesterday so it's obvious I don't understand much of it yet but, using several demos and reading the docs, I could setup a working sorting in a table until I discovered the Pager Widget.

It's not that it's not working, it's just not working as I would expect it to work. Most of my implementation is based on this demo provided by the author.

I just removed the widthFixed option and the zebra widget (because I didn't see it in action) and defined two of my four columns to not be sortable. I also modified slightly the output text of pager widget:

$( document ).ready( function() {

    $( 'table' ).tablesorter({

        theme: 'bootstrap',
        headerTemplate: '{content}{icon}',
        widgets: [ "uitheme" ],
        headers: {
            3:{sorter: false},
            4:{sorter: false}
        }
    }).tablesorterPager({

        container: $(".ts-pager"),
        saveSort : false,
        output: '{startRow} to {endRow} ({totalRows})'
    });

});

This script goes in the end of HTML, near the </body>, as an external file. Different of most usages of jQuery plugins, because I'm using one footer file common to all pages (part of server side programming), instead of add the scripts also in the end, I've added them right after the table to be sorted, in the following order:

<script src="/public/assets/projectfolder/js/jquery.tablesorter.min.js"></script>
<script src="/public/assets/projectfolder/js/jquery.tablesorter.widgets.min.js"></script>
<script src="/public/assets/projectfolder/js/jquery.tablesorter.pager.min.js"></script>

Now, the things I think that aren't working, but it's probably dumbness of my part, are.

  • Pager options being memorized after refresh

I thought this was a bug until find the option saveSort and set it to false in tableSortPager options. However this didn't work as I would expect and what I chose in the page size dropdown was being kept after refresh just like if that option hasn't been set.

  • Initial number of visible rows doesn't work everytime

The first time I've added the Pager widget, it worked. But because the default memory behavior is to remember the the sorting choices, every new request after that didn't work anymore. The initial number of visible rows is always the one picked in the page size dropdown.

This is so true that if I pick another value, the number changes as expected and, after a refresh, the amount I picked before is the one displayed.

Reading the docs I saw the size option. I defined it with a low number (because I'm still building the GUI and I don't have real data) but, again, the number of rows displayed was the one memorized.

Cleaning browser cache makes this property work as intended, until a new value for page size is picked and, even with saveSort defined as false, be memorized again.

How could I solve these issues?

Solution

  • The option you want to use is the pager savePages option. 

    $(function(){
    $( 'table' ).tablesorter({
        theme: 'bootstrap',
        headerTemplate: '{content}{icon}',
        widgets: [ "uitheme" ],
        headers: {
            3:{sorter: false},
            4:{sorter: false}
        }
    })
    .tablesorterPager({
        container: $(".ts-pager"),
        savePages : false,
        output: '{startRow} to {endRow} ({totalRows})'
    });
});

    The saveSort widget option actually works with the saveSort widget, and that option belongs inside the widgetOptions:

    $(function(){
  $("table").tablesorter({
    widgets: ["saveSort"],
    widgetOptions : {
      // if false, the sort will not be saved for next page reload
      saveSort : false
    }
  });
});