Issues using simplePagination jQuery plugin with tablesorter widget

1
votes

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

2
jquerytablesorter

2 Answers

2
votes

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?

0
votes

I found the answer, though im not sure if its the best way or not, but just a workaround, will figure something better. I used the tablesorter-pager plugin to determine the records on a page:

$("#table").tablesorterPager({
    page: 0,
    size: 10,    
});

and it worked for me, definitely this is not the best approach, but for now, its fine!!:)