编辑：事实证明，我的寻呼机js文件已经过时 - 它没有包含在可下载的tablesorter zip文件中，显然我发现并且使用了相当旧的版本。
我正在尝试使用自己的表重新创建this example中的表格。目前我正处于寻呼机工作的位置，过滤器也正常工作，除了我自己的表所需的单个核心功能。此功能是可以过滤当前未显示的单个记录。例如，在Mottie的链接示例中，您可以过滤“25”上的名称列，它将显示带有Student25的单行 - 即使您之前只显示了前10个结果。对于我的表的过滤过滤所有行/记录是至关重要的，即使我当时只显示它们的一小部分。 即使我显示的特定数量的记录当前不包含我正在寻找的行/记录，如何过滤所有行/记录，例如Mottie的示例吗
我的JQuery代码：
$(document).ready(function() {
// **********************************
// Description of ALL pager options
// **********************************
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $(".pager"),
// use this url format "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
ajaxUrl: null,
// modify the url after all processing has been applied
customAjaxUrl: function(table, url) { return url; },
// process ajax so that the data object is returned along with the total number of rows
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
ajaxProcessing: function(ajax){
if (ajax && ajax.hasOwnProperty('data')) {
// return [ "data", "total_rows" ];
return [ ajax.total_rows, ajax.data ];
}
},
// output string - default is '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 10,
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
savePages : true,
//defines custom storage key
storageKey:'tablesorter-pager',
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// css class names of pager arrows
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssGoto: '.gotoPage', // select dropdown to allow choosing a page
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled: 'disabled', // Note there is no period "." in front of this class name
cssErrorRow: 'tablesorter-errorRow' // ajax error information row
};
$("table")
.bind('filterInit', function() {
// check that storage ulility is loaded
if ($.tablesorter.storage) {
// get 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(){
return $(this).val() || '';
}).get();
$.tablesorter.storage(this, 'tablesorter-filters', f);
}
})
// Initialize tablesorter
// ***********************
.tablesorter({
theme: 'blue',
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
widthFixed: true,
widgets: ['zebra', 'filter'],
widgetOptions: {
// zebra widget: adding zebra striping, using content and
// default styles - the ui css removes the background
// from default even and odd class names included for this
// demo to allow switching themes
// [ "even", "odd" ]
zebra: [
"ui-widget-content even",
"ui-state-default odd"
],
// uitheme widget: * Updated! in tablesorter v2.4 **
// Instead of the array of icon class names, this option now
// contains the name of the theme. Currently jQuery UI ("jui")
// and Bootstrap ("bootstrap") themes are supported. To modify
// the class names used, extend from the themes variable
// look for the "$.extend($.tablesorter.themes.jui" code below
uitheme: 'jui',
// columns widget: change the default column class names
// primary is the 1st column sorted, secondary is the 2nd, etc
columns: [
"primary",
"secondary",
"tertiary"
],
// columns widget: If true, the class names from the columns
// option will also be added to the table tfoot.
columns_tfoot: true,
// columns widget: If true, the class names from the columns
// option will also be added to the table thead.
columns_thead: true,
// filter widget: If there are child rows in the table (rows with
// class name from "cssChildRow" option) and this option is true
// and a match is found anywhere in the child row, then it will make
// that row visible; default is false
filter_childRows: false,
// filter widget: If true, a filter will be added to the top of
// each table column.
filter_columnFilters: true,
// filter widget: css class applied to the table row containing the
// filters & the inputs within that row
filter_cssFilter: "tablesorter-filter",
// filter widget: Customize the filter widget by adding a select
// dropdown with content, custom options or custom filter functions
// see http://goo.gl/HQQLW for more details
filter_functions: null,
// filter widget: Set this option to true to hide the filter row
// initially. The rows is revealed by hovering over the filter
// row or giving any filter input/select focus.
filter_hideFilters: false,
// filter widget: Set this option to false to keep the searches
// case sensitive
filter_ignoreCase: true,
// filter widget: jQuery selector string of an element used to
// reset the filters.
filter_reset: ".reset",
// Delay in milliseconds before the filter widget starts searching;
// This option prevents searching for every character while typing
// and should make searching large tables faster.
filter_searchDelay: 300,
// filter widget: Set this option to true to use the filter to find
// text from the start of the column. So typing in "a" will find
// "albert" but not "frank", both have a's; default is false
filter_startsWith: false,
// filter widget: If true, ALL filter searches will only use parsed
// data. To only use parsed data in specific columns, set this option
// to false and add class name "filter-parsed" to the header
filter_useParsedData: false,
// Resizable widget: If this option is set to false, resized column
// widths will not be saved. Previous saved values will be restored
// on page reload
resizable: true,
// saveSort widget: If this option is set to false, new sorts will
// not be saved. Any previous saved sort will be restored on page
// reload.
saveSort: true,
// stickyHeaders widget: css class name applied to the sticky header
stickyHeaders: "tablesorter-stickyHeader"
}
})
// initialize the pager plugin
// ****************************
.tablesorterPager(pagerOptions);
});
使用这些.js文件：
<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>
感谢任何帮助，谢谢！
答案 0 :(得分：1)
使用ajax数据时，任何排序或过滤都必须由您的服务器完成。
要将正确的数据传递到服务器，需要设置ajaxUrl选项以发布排序列，排序方向和任何过滤器（按列）。
问题中链接的演示适用于已包含所有行的表。有关ajax示例，请参阅this demo。请注意，ajaxUrl显示在表格上方，并在您与表格交互时更新。 可悲的是，此演示未附加到实际数据库，因此排序和过滤不起作用。
一旦服务器得到排序＆amp;过滤数据并将其发送回浏览器，然后ajaxProcessing function可以操纵数据进行渲染。
我希望能够解决你的问题。