Tablesorter detect changes or on change?

Question

I am having trouble finding out how to do the following:

I want a counter at the top with the number of rows displayed and the number of total rows like this:

10/100 (Not a pager)

What do I trigger on?

I have a variable on $(document).ready() like this: var total = $('table').length; How do I trigger the current rows on a filter change?

I am using the tablesorter plugin.

Answer 1

Try this code (demo), it uses the filterEnd event to update the row count display:

var $count = $('.count'),
    $t = $('table'),
    $tr = $t.find('tbody tr'),
    update = function(){
        var t = $tr.filter(':visible').length + '/' + $tr.length;
        $count.html(t);
    };

$t
    .on('filterEnd', function () {
        update();
    })
    .tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter'],
        initialized: function(){
            update();
        }
    });