如何使用 table 排序器插件搜索 table 中的项目-Jquery

Question

我正在使用 tablesorter 插件和 tablesorter 小部件来搜索 table 中的项目。但是我在尝试设置每页行数时与 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();

然而，它从来没有在 tablesorter widgets 文件中的某个点使用每页编号，它会覆盖每页编号并将其重置为项目的原始长度。我可以使用任何其他方式从输入字段中搜索项目吗？

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

谢谢！

Answer 1

查看文档，您似乎没有什么问题。

正在jsFiddle 演示以下修复

问题 1：

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

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

问题 2：

introduction 状态：

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:

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

Uncaught TypeError: Cannot read property 'resizableNoSelect' of undefined

Uncaught TypeError: Cannot read property 'widgetOptions' of undefined

问题 3：

根据 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....

这意味着你有 <input class="search-items"/> 的地方应该更像 <input class="search-items" type="search" placeholder="Search" data-column="all">（如果需要，将“全部”更改为列号）

第 4 期：

如您所述，filter 小部件似乎覆盖了分页设置。一个快速解决这个问题的方法是将隐藏元素的调用移动到 onInit: 回调中，并将其放在计时器函数中，这样它就可以让 filter 插件先做它的事情然后隐藏其他“页面”。像这样：

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

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

如何使用 table 排序器插件搜索 table 中的项目-Jquery

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

javascript

jquery

tablesorter

正在jsFiddle 演示以下修复

问题 1：

问题 2：

问题 3：

第 4 期：