Question

我使用tablesorter插件和tablesorter小部件来搜索表格中的项目。但是在尝试设置每页的行数时，我与tablesorterWidgets.js文件发生冲突。 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();

然而，在tableorter小部件文件中的某个时刻它从未使用perPage编号，它会覆盖perPage编号并将其重置为项目的原始长度。有没有其他方法可以用来搜索输入字段中的项目。

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

谢谢！

Answer 1

查看文档，看起来你几乎没有问题。

工作jsFiddle演示以下修正

问题1：

您正在tablesorter.js Version 2.0.5b使用tablesorter.widgets.js v2.23.3

您应该使用每个版本的最新版本：tablesorter.js v2.23.3和tablesorter.widgets.js v2.23.3

问题2：

introduction州：

tablesorter是一个jQuery插件，用于将标准HTML表格与THEAD和TBODY标记转换为可排序的表格，而无需刷新页面。 tablesorter可以成功地解析和排序多种类型的数据，包括单元格中的链接数据。它有许多有用的功能，包括：

您的表格中没有所需的THEAD或TBODY标记。如果没有检测到，则不会初始化tablesorter，因此无法创建小部件，导致这些错误出现在控制台中：

未捕获的TypeError：无法读取属性＆residenceNoSelect＆＃39;未定义的

未捕获的TypeError：无法读取属性＆＃39; widgetOptions＆＃39;未定义的

问题3：

根据documentation for $.tablesorter.filter.bindSearch

包含数据列=＆＃34;＃＆＃34;搜索输入中的属性（其中＃是列号），指定搜索应该应用于哪一列〜有关完整示例，请参阅this demo。警告！，如果没有向输入添加数据列属性，输入将被忽略。

在v2.15中，使用data-column =＆＃34; all＆＃34;绑定外部任意匹配搜索过滤器....

这意味着您拥有<input class="search-items"/>的地方应该更像<input class="search-items" type="search" placeholder="Search" data-column="all">（如果需要，可以更改＆＃34;全部＆＃34;到列号）

第4期：

正如您所提到的，filter窗口小部件似乎覆盖了分页设置。解决这个问题的一种快速方法是将调用隐藏元素移入onInit:回调并将其放入计时器函数中，以便让filter插件首先执行其操作然后< / strong>隐藏其他＆＃34;页面＆＃34;。像这样：

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

这可能不是最好的方法，但如果不深入了解小部件，这确实有效。

如何使用表分类器插件-Jquery在表中搜索项目

1 个答案:

工作jsFiddle演示以下修正

问题1：

问题2：

问题3：

第4期：