jquery - Tablesorter filter plugin + filter widget: Filtering/searching results that are not currently displayed -

jquery - Tablesorter filter plugin + filter widget: Filtering/searching results that are not currently displayed -

edit: turns out, pager js file outdated - it's not included in downloadable tablesorter zip file, , apparently found , using rather old version.

i trying recreate table found in this example using own table. i'm @ point pager working , filter working well, except single core functionality required own table. functionality ability filter on single record not displayed. example, in linked illustration of mottie can filter name column on '25', , show single row student25 - though displaying first 10 results. vital table's filtering filter through rows/records, though displaying little margin of them @ time. how filter through rows/records though displaying specific number of records not contain row(s)/record(s) i'm looking for, in illustration of mottie?

my jquery code:

$(document).ready(function() { // ********************************** // description of pager options // ********************************** var pageroptions = { // target pager markup - see html block below container: $(".pager"), // utilize url format "http:/mydatabase.com?page={page}&size={size}&{sortlist:col}" ajaxurl: null, // modify url after processing has been applied customajaxurl: function(table, url) { homecoming url; }, // process ajax info object returned along total number of rows // example: { "data" : [{ "id": 1, "name": "foo", "last": "bar" }], "total_rows" : 100 } ajaxprocessing: function(ajax){ if (ajax && ajax.hasownproperty('data')) { // homecoming [ "data", "total_rows" ]; homecoming [ ajax.total_rows, ajax.data ]; } }, // output string - default '{page}/{totalpages}' // possible variables: {page}, {totalpages}, {filteredpages}, {startrow}, {endrow}, {filteredrows} , {totalrows} output: '{startrow} - {endrow} / {filteredrows} ({totalrows})', // apply disabled classname pager arrows when rows @ either extreme visible - default true updatearrows: true, // starting page of pager (zero based index) page: 0, // number of visible rows - default 10 size: 10, // save pager page & size if storage script loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js) savepages : true, //defines custom storage key storagekey:'tablesorter-pager', // if true, table remain same height no matter how many records displayed. space made empty // table row set height compensate; default false fixedheight: true, // remove rows table speed sort of big tables. // setting false, hides non-visible rows; needed if plan add/remove rows pager enabled. removerows: false, // css class names of pager arrows cssnext: '.next', // next page arrow cssprev: '.prev', // previous page arrow cssfirst: '.first', // go first page arrow csslast: '.last', // go lastly page arrow cssgoto: '.gotopage', // select dropdown allow choosing page csspagedisplay: '.pagedisplay', // location of "output" displayed csspagesize: '.pagesize', // page size selector - select dropdown sets "size" alternative // class added arrows when @ extremes (i.e. prev/first arrows "disabled" when on first page) cssdisabled: 'disabled', // note there no period "." in front end of class name csserrorrow: 'tablesorter-errorrow' // ajax error info row }; $("table") .bind('filterinit', function() { // check storage ulility loaded if ($.tablesorter.storage) { // saved filters var f = $.tablesorter.storage(this, 'tablesorter-filters') || []; $(this).trigger('search', [f]); } }) .bind('filterend', function(){ if ($.tablesorter.storage) { // save current filters var f = $(this).find('.tablesorter-filter').map(function(){ homecoming $(this).val() || ''; }).get(); $.tablesorter.storage(this, 'tablesorter-filters', f); } }) // initialize tablesorter // *********************** .tablesorter({ theme: 'blue', headertemplate : '{content} {icon}', // new in v2.7. needed add together bootstrap icon! widthfixed: true, widgets: ['zebra', 'filter'], widgetoptions: { // zebra widget: adding zebra striping, using content , // default styles - ui css removes background // default , odd class names included // demo allow switching themes // [ "even", "odd" ] zebra: [ "ui-widget-content even", "ui-state-default odd" ], // uitheme widget: * updated! in tablesorter v2.4 ** // instead of array of icon class names, alternative // contains name of theme. jquery ui ("jui") // , bootstrap ("bootstrap") themes supported. modify // class names used, extend themes variable // "$.extend($.tablesorter.themes.jui" code below uitheme: 'jui', // columns widget: alter default column class names // primary 1st column sorted, secondary 2nd, etc columns: [ "primary", "secondary", "tertiary" ], // columns widget: if true, class names columns // alternative added table tfoot. columns_tfoot: true, // columns widget: if true, class names columns // alternative added table thead. columns_thead: true, // filter widget: if there kid rows in table (rows // class name "csschildrow" option) , alternative true // , match found anywhere in kid row, create // row visible; default false filter_childrows: false, // filter widget: if true, filter added top of // each table column. filter_columnfilters: true, // filter widget: css class applied table row containing // filters & inputs within row filter_cssfilter: "tablesorter-filter", // filter widget: customize filter widget adding select // dropdown content, custom options or custom filter functions // see http://goo.gl/hqqlw more details filter_functions: null, // filter widget: set alternative true hide filter row // initially. rows revealed hovering on filter // row or giving filter input/select focus. filter_hidefilters: false, // filter widget: set alternative false maintain searches // case sensitive filter_ignorecase: true, // filter widget: jquery selector string of element used // reset filters. filter_reset: ".reset", // delay in milliseconds before filter widget starts searching; // alternative prevents searching every character while typing // , should create searching big tables faster. filter_searchdelay: 300, // filter widget: set alternative true utilize filter find // text start of column. typing in "a" find // "albert" not "frank", both have a's; default false filter_startswith: false, // filter widget: if true, filter searches utilize parsed // data. utilize parsed info in specific columns, set alternative // false , add together class name "filter-parsed" header filter_useparseddata: false, // resizable widget: if alternative set false, resized column // widths not saved. previous saved values restored // on page reload resizable: true, // savesort widget: if alternative set false, new sorts // not saved. previous saved sort restored on page // reload. savesort: true, // stickyheaders widget: css class name applied sticky header stickyheaders: "tablesorter-stickyheader" } }) // initialize pager plugin // **************************** .tablesorterpager(pageroptions); });

using these .js files:

<script type="text/javascript" src="js/jquery.tablesorter.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.widgets.js"></script>

any help appreciated, thanks!

when working ajax data, sorting or filtering must done server.

to pass right info server, ajaxurl alternative needs set post sort column(s), sort directions, , filter (by column).

the demo linked in question meant tables contain rows. ajax example, see this demo. notice ajaxurl shown above table , updated interact table. sadly, demo not attached actual database, sorting , filtering not work.

once server gets sort & filter info , sends browser, ajaxprocessing function can manipulate info rendering.

i hope clears question.

jquery jquery-plugins tablesorter