CODEWITHSUNDEEP
javascriptjquerytablesorter
kinske
kinske

Reputation: 607

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?

Upvotes: 1

Views: 6135

Answers (2)

Nguyễn Diễn
Nguyễn Diễn

Reputation: 61

   // edit in jquery.tablesorter.pager.js,
   // add to construct function
   var total_page= config.totalPages;
   var total_rows_per_page = config.size;
   var total_rows = total_page*total_rows_per_page;

   // set value all to .pagesize
   $(".pagesize").append('<option value="' + total_rows  + '">All</option>');

Upvotes: 2

Mottie
Mottie

Reputation: 86413

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
    });

Upvotes: 2

Related Questions