Pager controls not working with Pager Plugin + Filter Widget

[tombajzek]

I'm trying to use the Pager Plugin + Filter Widget in an existing web app with a fairly long table. My table loads and the filters work. However, the entire table appears, unpaged. The Pager controls appear, but are empty/non-functional. That is, the Page button is empty, the next and previous page button do nothing, the size selector has no effect, and the startRow - endRow / filteredRows display zeros. The Disable/Enable Pager and the Destroy/Restore Pager button appear, and toggle, but they appear to be ineffective, and paging does not actually occur to begin with. The only element of these that is correct is the totalRows. I'd thought I'd missed some piece of the needed code, but I cannot see where anything is missing.

I do have the pagerOptions, table sorter initialization, and pager plugin initialization in a script.js file separate from the html page. This file is loaded by the html page, and there are no javascript errors.

Can you suggest what I should look for?

[Mottie]

Hi @tombajzek!

It's difficult for me to just guess at what the problem might be. Are you sure all of the files are loading (try the network tab)? How is the table set up, does it exist in the HTML or is it loaded via ajax?

Some code would go a long way in helping me help you find the problem.

[tombajzek]

Mottie, It looks like all the files loaded, except for a a gif file with a name about as long as its contents. The table is 169 records read in by a php program record by record from a mysql DB and displayed on the html page line-by-line as the data is read, no ajax at all. I've attached the 2 files that are part of the application that I'm putting table sorter into. The table and its headers are generated on lines 367 to 418 of listTickets.php, which I've attached. The javascripts are in scripts.js. Note that the path to tablesorter is up a level so that code can be shared by other programs in other directories. (This works.) I didn't want to send you the source unless you asked for it, so I'm attaching it now.

What's the right way to send you the source? A PNG, GIF, or JPG don't seem suitable.

Thanks, Tom

[Mottie]

I'm not very good with php, so ideally, if you could set up a scenario showing the problem by modifying this demo that would be great.

If you have difficulty, with that, then you can send me the files on gmail, user wowmotty.

[tombajzek]

Mottie, It looks like all the files loaded, except for a a gif file with a name about as long as its contents. The table is 169 records read in by a php program record by record from a mysql DB and displayed on the html page line-by-line as the data is read, no ajax at all. I've attached the 2 files that are part of the application that I'm putting table sorter into. The table and its headers are generated on lines 367 to 418 of listTickets.php, which I've attached. The javascripts are in scripts.js. Note that the path to tablesorter is up a level so that code can be shared by other programs in other directories. (This works.) I didn't want to send you the source unless you asked for it, so I'm attaching it now.

[tombajzek]

Mottie, I have mostly good news. Using your JSFiddle, I pasted a hunk of my HTML data into your setup. While choosing the cuff to paste in, I discovered that the <tbody> tag for my table was misplaced. Fixing that corrected the problem with the empty pager elements. So, the sorting, paging and filtering are basically working. I want to thank you for your help with this, as it was driving me crazy. One issue remains, which is that the Disable Pager and Destroy Pager buttons are not in the version thou set-up for me. I think my client would find the Disable Pager to be useful for certain things they do with this application. I'm going to look at that next. It may be easier to find that now that the <tbody> issue has been fixed. I won't bother you unless it's necessary. Thanks for your help, Tom

[tombajzek]

Mottie,

My javascript code contains the code from the example of the Pager + Filter at the end of the script.js file to handle the Disable/Enable Pager and Destroy/Restore Pager buttons, which I've included in the HTML. These features were not included in the JSFiddle you set up for me. These still do not work in my actual application, although the rest of the Pager works correctly.

The js code for these is here:

// Destroy pager / Restore pager
// **************
$('button:contains(Destroy)').click(function(){
  // Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
  var $t = $(this);
  if (/Destroy/.test( $t.text() )){
    $('ticketTable').trigger('destroy.pager');
    $t.text('Restore Pager');
  } else {
    $('ticketTable').tablesorterPager();
    $t.text('Destroy Pager');
  }
  return false;
});

// Disable / Enable
// **************
$('.toggle').click(function(){
  var mode = /Disable/.test( $(this).text() );
  $('ticketTable').trigger( (mode ? 'disable' : 'enable') + '.pager');
  $(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
  return false;
});
$('#ticketTable').bind('pagerChange', function(){
  // pager automatically enables when table is sorted.
  $('.toggle').text('Disable');
});

This code works fine in the example: http://mottie.github.io/tablesorter/docs/example-pager-filtered.html

Do you have any suggestions for this?

Thanks, Tom

[Mottie]

Hey Tom... sorry having a busy day here.

It looks like there are two selectors that are missing the # in them:

$('ticketTable').trigger('destroy.pager');

and

$('ticketTable').trigger( (mode ? 'disable' : 'enable') + '.pager');

correction... 3 places:

$('ticketTable').tablesorterPager();

[tombajzek]

Mottie, That's it! I should have caught those.

Thanks very much for your help on this. I really appreciate it. Also, this tool is very useful and nicely constructed. I'm sure I'll find more uses for it in other scenarios. I really like the way it works, and it is much cleaner than some other tools I looked at that provide similar functionality.

Thanks, Tom

[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.