Search code examples
javascriptjquerytablesorter

tablesorter pager plugin - show all entries as default


I'm using this tablesorter version: http://tablesorter.com/docs/

Having this relevant html:

 <select class="pagesize form-control text-center">
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="all" selected="selected">alle</option>
 </select>

and this js:

function tableSorter()
{  
  $("#tableOverview")
    .tablesorter()
    .tablesorterPager({container: $("#pager")});

  var rows = $('table.tablesorter')[0].config.totalRows;
  $('select.pagesize').find('option:contains("all")').val(rows);
}

Now I want to get displayed all items of the table as default / on loading. If it is not default and you have to choose it after loading the page, it works fine with this:

var rows = $('table.tablesorter')[0].config.totalRows;
$('select.pagesize').find('option:contains("all")').val(rows);

Setting the size in the defaults in jquery.tablesorter.pager.js to a high value works too, but it causes an error if you want to sort the table (nothing is shown then).

So is there any way to set the default size of the paging to all entries of the table?


Solution

  • All you need to do different is to set the value to some really big number like 9999 in both the selected option value and in the pager size option (demo):

    HTML

    <select class="pagesize">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option selected="selected" value="9999">all</option>
    </select>
    

    Javascript

    $('table')
        .tablesorter({
            widthFixed: true,
            widgets: ['zebra']
        })
        .tablesorterPager({
            container: $("#pager"),
            size: 9999 // pick a number larger than your table
        });