pager not working with multiple tables in page. Only 1st 10 item visible

[eyeris]

Hi I am using table sorter with bootstrap3
everything is ok when there is only one table in page

like $("table").tablesorter({......

But when there are several tables with <table> in page. the pager doesnt work. the arrows are disabled and its strange that only the first 10 items are visible. No arrows are working.

I tried everything so far but failed. Can anyone help.

[Mottie]

Hi @eyeris!

I think the issue here is that $("table") is a generic selector. I'm guessing the pager is either using .pager or #pager as well. So, to fix it, just make these selectors unique to each table (see this demo):

For the first table, name it something like table1; and name the associated pager something like pager1:

<table class="table1">...<table>
<div class="pager1">...</div>

For the each table & pager combo after the first, change the number of the selectors:

<table class="table2">...<table>
<div class="pager2">...</div>

then each table will need to be initialized separately:

$(".table1").tablesorter().tablesorterPager({ container: '.pager1' });
$(".table2").tablesorter().tablesorterPager({ container: '.pager2' });

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.

[teefars]

Hi, I was struck in the same issue, and I'm concerned about tons of tables on my application. So I made this simple code that gives IDs to tables, numbered as they appear in the code, and apply the specific pager to each of them.

  $(".tablesorter table").each(function(pageTableCount){
    // Check if pageTableCount was initialized, and add 1 to its value
    pageTableCount !==null ? pageTableCount++ : 1;
    // Get the table and add ID with counter
    table = $(this);
    table.attr("id","table-sorter-"+pageTableCount);
    // Does the same with the pager
    pager = table.parent().find(".tablesorter-pager");
    pager.attr("id","table-sorter-pager-"+pageTableCount);
    // Initiate the tablesorter
    table.tablesorter()
    .tablesorterPager({
      container: "#table-sorter-pager-"+pageTableCount
    });
  })

[pearlbells]

Please check the live demo . Using tablesorter plugin you can add multiple tables in one page.
http://www.pearlbells.co.uk/table-pagination/

[Mottie]

@pearlbells Most of the code won't work with this forked version of tablesorter, but most of it would only require a simple change (for the both the pager Addon and the widget).

addPageList

In your version, it doesn't include filtered rows (using the filtered widget):

function addPageList(table) {
  var i, len,
    c = table.config,
    p = c.pager;
  p.filteredRows = 0;
  normalized = c.cache[ 0 ].normalized;
  len = normalized.length;
  for ( i = 0; i < len; i++ ) {
    p.filteredRows += p.regexRows.test( normalized[ indx ][ c.columns ].$row[ 0 ].className ) ? 0 : 1;
  }
  p.filteredPages = Math.ceil( p.filteredRows / p.size );
  p.totalPages = Math.ceil(p.totalRows / p.size);
  p.$container.find('ul').empty();
  for (i = 1; i <= c.filteredPages; i++) {
    p.$container.find('ul').append('<li>' + i + '</li>');
  }
}

setPage

In my forked version, you have access to these methods:

$('table').trigger( method, [ value(s) ] );

• pageAndSize - See http://mottie.github.io/tablesorter/docs/#pageandsize
• pageSet - See http://mottie.github.io/tablesorter/docs/#pageset
• pageSize - See http://mottie.github.io/tablesorter/docs/#pagesize

addClass

In my forked version, use table.config.pager instead of table.config

function addClass(table){
    var p = table.config.pager;
    p.$container.find('li').removeClass('active');
    p.$container.find('li').eq(p.page).addClass('active');
}

click Event

table.config.pager.$goto.on( 'click', 'li', function() {
  var pageNum = parseInt( $(this).html(), 10 ) - 1;
  $(table).trigger('pageSet', pageNum);
  return false;
});

[pearlbells]

Hi ,

thanks for the reply. I have used the tablesorter plugin to add sorting and pagination to one of my wordpress plugins. I am not sure which version i have used.

but my needs includes :
i) Display multiple tables in one page
ii) Navigate to the selected page
iii) Change the navigation list dynamically based on the size selected

For that i have added the function that listed in my blog to meet my needs that seems working.

anyway thank you very much the reply.

Pearl

[SqualaDesign]

Hi, I have the same problem with the last version of tablesorter 2.31.1
I created a web application in PHP that calls tables from database and includes the pager but I now created a page with 3 tables and only 1 pager is working.
I don't have any ID only classes
Thanks

[Mottie]

Hi @SqualaDesign!

Please make sure to initialize each pager separately - refer to this example in the comments above.

[SqualaDesign]

Hi @SqualaDesign!

Please make sure to initialize each pager separately - refer to this example in the comments above.

I don't have different pager and also no of them has IDs

[Mottie]

Please share the code being used so we can help troubleshoot the problem.