How to search for items in a table using the table sorter plugin-Jquery

I'm using the tablesorter plugin and tablesorter widgets for searching through the items in a table. however i had a conflict with the tablesorterWidgets.js file while trying to set the number of rows per page. js:

var $table = $("#table").tablesorter({
                         widgets: ['zebra', 'columns', 'filter'],
                         widthFixed : true,
                         ignoreCase: true,
                         widgetOptions : {
                            filter_columnFilters: false
                        }
 //used for searching specific items in the table
 $.tablesorter.filter.bindSearch( $table, $('input.search-sub-accounts'));
 items = $("table tbody tr");
                    perPage = 2;
                    numItems = items.length;
                    items.slice(perPage).hide();

However it never took the perPage number coz at some point in tablesorter widgets file, it overwrites the perPage number and resets it back to the original length of the items. is there any other way i could use to search the items from the input field.

http://jsfiddle.net/anLa1how/5/

Thanks!

Solution

Looking through the documentation, it looks like you have few issues.

Working jsFiddle demonstrating the below fixes

Issue 1:

You are using tablesorter.js Version 2.0.5b with tablesorter.widgets.js v2.23.3

You should instead use the newest version of each: tablesorter.js v2.23.3 and tablesorter.widgets.js v2.23.3

Issue 2:

The introduction states:

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

Your table does not have THEAD or TBODY tags which are required. If none are detected the tablesorter is not initialized and therefore the widgets cannot be created causing these errors to appear in the console:

Uncaught TypeError: Cannot read property 'resizableNoSelect' of undefined

Uncaught TypeError: Cannot read property 'widgetOptions' of undefined

Issue 3:

Per the documentation for $.tablesorter.filter.bindSearch

Include a data-column="#" attribute (where # is the column number) in the search input, to specify to which column the search should apply ~ see this demo for a full example. Warning!, if no data-column attribute is added to the input, the input will be ignored.

In v2.15, use a data-column="all" to bind an external any-match search filter....

This means that where you have <input class="search-items"/> it should be more like <input class="search-items" type="search" placeholder="Search" data-column="all"> (change "all" to a column number if needed)

Issue 4:

As you mentioned, the filter widget seems to be overriding the pagination settings. A quick way to get around that would be to move the call to hide elements into the onInit: callback and put it inside a timer function so it lets the filter plugin do its thing first then hides the other "pages". Like this:

setTimeout(function(){ items.hide().slice(startItem - 1, endItem).show();}, 100);

This might not be the best way but without getting too deep into the widgets, this does work.