CODEWITHSUNDEEP
jquerytablesorter
andrewsi
andrewsi

Reputation: 10732

jquery - tablesorterpager and custom parser not working together

I'm writing a piece of code to let users create and maintain contact lists. Contacts are being listed in a table, with the first cell being a checkbox that is checked if this contact is already in this contact list.

I'm using the tablesorterpager plugin, so users can page through the list of contacts easily; and I've got a custom parser for the checkbox field that will sort contacts by whether the checkbox is checked or not.

My problem is that I can't get both these working at the same time.

The relevant code is this:

$(function() {
        $('#userTable')
                .tablesorter({
                        headers: {
                                0: {
                                        sorter: 'checkbox'
                                }
                        }
                })
                .tablesorterPager({container: $("#pager")});
});

If I comment out either the .tablesorter call or the .tablesorterPager call, then the other one works fine. If I leave them both uncommented, then only the second call actually works - it seems that I can have either pagination, or a custom parser, but not both. I've swapped over the two calls, and it's consistently the second one that's run - the first one disappears.

I assume that I'm missing something obvious, but I can't find what. Both calls by themselves are clearly fine, because they work when the other one is commented out, but they don't work together.

I'm using tablesorter 2.1.19 (from here); and jquery 1.7.1

Upvotes: 0

Views: 1791

Answers (1)

Mottie
Mottie

Reputation: 86413

When you use that parser it uses the "updateCell" method to change the cell content, but since that method determines the cell location using rowIndex and cellIndex, it may not get accurate information when the pager is active. So the easiest solution, would be to set the pager removeRows option to false.

Here is a demo

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
  id: 'checkbox',
  is: function(s) {
    return false;
  },
  format: function(s, table, cell, cellIndex) {
    var $c = $(cell);
    // return 1 for true, 2 for false, so true sorts before false
    if (!$c.hasClass('updateCheckbox')) {
      $c.addClass('updateCheckbox').bind('change', function() {
        // resort the table after the checkbox status has changed
        var resort = false;
        $(table).trigger('updateCell', [cell, resort]);
      });
    }
    return ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
  },
  type: 'numeric'
});

$(function() {

  $('table')
    .tablesorter({
      widgets: ['zebra'],
      headers: {
        0: { sorter: 'checkbox' }
      }
    })
    .tablesorterPager({
    // target the pager markup - see the HTML block below
    container: $(".pager"),
    // remove rows from the table to speed up the sort of large tables.
    // setting this to false, only hides the non-visible rows; needed
    // if you plan to add/remove rows with the pager enabled.
    removeRows: false
  });

});​

Upvotes: 7

Related Questions