Issues using simplePagination jQuery plugin with tablesorter widget

Question

I'm using the simplePagination jQuery plugin to perform the pagination and table sorter for sorting and filtering the inputs. The reason i chose 'simplePagination' over 'tablesorter pager' as i wanted to perform similar functionality as the simplePagination perform for my project. However I'm seeing some issues/clashes while using tablesorter widget and simplePagination plugin. Issues: 1) im unable to display the required records per page (i.e: 10 records on a page) anymore. 2) im unable to filter the items when i type in the search box.

below is my initialization for both both plugins:

tablesorter: JS

$("#table").tablesorter({
     widgets: ['zebra', 'filter'],
     widgetOptions : {
        filter_columnFilters: false
}   

simplePagination:Js

perPage = 10;
$("#pagination").pagination({
    items: 20,
    itemsOnPage: perPage,
    onPageClick: function(pageNumber) { 
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;
        items.hide().slice(showFrom, showTo).show();
    },
});

has anyone encountered similar situation before..Any ideas how can it be resolved?? Thanks

Answer 1

If you want to use simplePagination, you'll need to use it along side the pager plugin or widget. Here is a demo using the pager widget:

$(function () {
    var perPage = 10,
        $table = $('table');
    $table.tablesorter({
        widgets: ['zebra', 'filter', 'pager'],
        widgetOptions: {
            filter_columnFilters: false,
            pager_size: perPage
        },
        initialized: function (table) {
            /* 
            Using http://flaviusmatis.github.io/simplePagination.js/
            along with the pager widget
            */
            var pager = table.config.pager;
            $("#pagination").pagination({
                cssStyle: 'compact-theme',
                items: pager.totalRows,
                itemsOnPage: pager.size,
                onPageClick: function (pageNumber) {
                    $table.trigger('pageSet', pageNumber);
                }
            });
        }
    });

});

I'm not sure what to tell you about the filtering.. when the filter_columnFilters option set to false there is no way to set the filter. Or no way to interact with the filter widget was shared in the question. Do you have an external input?