Jquery tablesorter filters & ajax pager

Question

我正在使用这个tablesorter库对表中的数据进行排序和过滤。我还使用此插件将表格拆分为多个页面。

由于表中的记录数量变得相当大，页面的加载速度变慢(>60 秒(，因此我想通过使用 ajax 调用加载表的内容来更改页面的行为。

为此，我使用了此页面上的示例：https://mottie.github.io/tablesorter/docs/example-pager-ajax.html

并创建了一个单独的页面来执行查询并返回 json。到目前为止一切顺利，分页有效，过滤 en 排序也有效。

我面临的一个问题是某些列具有"下拉列表"过滤器(通过在列中添加class="filter-select"(。此下拉列表由表排序器插件自动填充，并在列中填充值。

现在我已切换到使用 ajax 调用加载数据，在最初加载页面时不再填充这些过滤器。当我在其他字段中输入一些数据时，下拉列表会突然填充。

为了找到问题的根源，我将代码精简为一个简单的示例，我仍然可以在其中重现该问题。代码如下所示：

<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tablesorter.css?v=239319">
<script type="text/javascript" src="/js/jquery.tablesorter.combined.js"></script>
<link rel="stylesheet" href="/js/jquery.tablesorter.pager.css">
<script src="/js/jquery.tablesorter.pager.js"></script>
<TABLE id='issueTable' class="tablesorter search-table table table-striped table-bordered table-hover">
<thead>
<TR>
<TH><B>Issue number</B></TH>
<TH><B>Registered by</B></TH>
<TH><B>Province</B></TH>
<TH class="filter-select"><B>Departement</B></TH>
</TR>
</thead>
<tbody class="rowlink">
</tbody>
</TABLE>
<div id="pager1" class="pager">
<form>
<img src="/js/tablesorter_pager_images/first.png" class="first"/>
<img src="/js/tablesorter_pager_images/prev.png" class="prev"/>
<span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} van {totalRows} meldingen"></span>
<img src="/js/tablesorter_pager_images/next.png" class="next"/>
<img src="/js/tablesorter_pager_images/last.png" class="last"/>
</form>
</div>

<script>
$(document).ready(function () {
var table = $("#issueTable");
var pager1Options = {
container: $("#pager1"),
page: 0,
size: 20,
pageReset: 0,
ajaxUrl: 'meldingen.json',
ajaxProcessing: function (data) {
if (data && data.hasOwnProperty('rows')) {
var indx, r, row, c, d = data.rows,
// total number of rows (required)
total = data.total_rows,
// array of header names (optional)
headers = data.headers,
// cross-reference to match JSON key within data (no spaces)
headerXref = headers.join(',').split(','),
// all rows: array of arrays; each internal array has the table cell data for that row
rows = [],
// len should match pager set size (c.size)
len = d.length;
// this will depend on how the json is set up - see City0.json
// rows
for (r = 0; r < len; r++) {
row = []; // new row array
// cells
for (c in d[r]) {
if (typeof(c) === "string") {
// match the key with the header to get the proper column index
indx = $.inArray(c, headerXref);
// add each table cell data to row array
if (indx >= 0) {
row[indx] = d[r][c];
}
}
}
rows.push(row); // add new row array to rows array
}
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [total, rows, headers];
}
},
};
table.tablesorter({
widgets: ['zebra', 'filter'],
}).bind('pagerChange pagerComplete pagerInitialized pageMoved', function (e, c) {
var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
$('#display')
.append('<li><span class="str">"' + e.type + msg + '</li>')
.find('li:first').remove();
}).tablesorterPager(pager1Options);
});
</script>

对于此示例，我使用了一个简单的 json 文件，如下所示：

{
"total_rows": 5,
"headers": [
"Issue number",
"Registered by",
"Province",
"Departement"
],
"rows": [
{
"Issue number": "914288",
"Registered by": "Jan",
"Province": "Utrecht",
"Departement": "Department 1"
},
{
"Issue number": "914289",
"Registered by": "Piet",
"Province": "Utrecht",
"Departement": "Department 1"
},
{
"Issue number": "914290",
"Registered by": "Klaas",
"Province": "Utrecht",
"Departement": "Department 1"
},
{
"Issue number": "914288",
"Registered by": "Erik",
"Province": "Utrecht",
"Departement": "Department 2"
},
{
"Issue number": "914288",
"Registered by": "Bart",
"Province": "Utrecht",
"Departement": "Department 2"
}
]
}

有了这个普通的JSON文件，过滤当然不会起作用，但是您可以看到"Departement"列的过滤器最初没有填充，一旦您在任何其他列中键入内容，它就会被填充。

知道我在这里错过了什么吗？

2017-08-04更新：

我现在正在用 ajax 请求填充过滤器。为此，我已将其添加到小部件选项中：

filter_selectSource: {
4: function (table, column, onlyAvail) {
$.getJSON('tablesorter_resources/filters.php?column=Department', function (data) {
var result = data.hasOwnProperty('options') ? data.options : false;
$.tablesorter.filter.buildSelect(table, column, result, true, onlyAvail);
});
}
return false;
}
}

但是根据文档，我应该这样做：

filter_selectSource: {
4: function (table, column, onlyAvail) {
console.log(table.hasInitialized);
// call ajax after tablesorter has initialized; this prevents
// multiple ajax calls during initialization
if (table.hasInitialized) {
$.getJSON('tablesorter_resources/filters.php?column=Department', function (data) {
var result = data.hasOwnProperty('options') ? data.options : false;
$.tablesorter.filter.buildSelect(table, column, result, true, onlyAvail);
});
}
return false;
}
}

但是我看到 table.hasInitialized 返回 false，因此当我添加该条件时，过滤器不会被填充。

我还注意到，自从我通过 ajax 切换到人口以来，页面大小设置为 30，即使我实际上每页只从数据库中获取 20 条记录并且我设置了大小：20。知道为什么会被忽略吗？

Answer 1

默认情况下，筛选器选择使用表的内容填充下拉列表。要添加不可用的选择，请使用filter_selectSource选项填充固定数量的值或通过 ajax 调用直接从数据库中获取数据。有关更多详细信息，请参阅文档中的示例。