我正在使用this tablesorter库进行排序和排序过滤表中的数据。我还使用this插件将表格分成多个页面。
由于我的表中的记录数量变得相当大，因此页面的加载速度变慢（> 60秒），所以我想通过加载表的内容来改变页面的行为。 ajax电话。
为此，我使用了此页面上的示例：https://mottie.github.io/tablesorter/docs/example-pager-ajax.html
并创建了一个单独的页面，执行查询并返回json。到目前为止，分页工作和过滤分类也很有效。
我面临的一个问题是某些列有一个“下拉”过滤器（通过向列添加class =“filter-select”）。这个下拉列表由tablesorter插件自动填充，列中包含值。
现在我已经切换到使用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} – {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请求填充过滤器。为此，我已将其添加到widgetOptions：
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，所以当我添加该条件时，过滤器不会被填充。
我还注意到页面大小设置为30，因为我通过ajax切换到填充，即使我只是从数据库中每页真正获得20条记录，我设置大小：20。任何想法为什么会这样忽略？
答案 0 :(得分：0)
默认情况下，过滤器选择使用表的内容填充下拉列表。要添加不可用的选项，请使用filter_selectSource option填充固定数量的值，或通过ajax调用直接从数据库获取数据。有关详细信息，请参阅文档中的示例。