1
我正在使用this tablesorter庫來對&過濾器數據進行排序。我還使用this插件可以將表分成多個頁面。Jquery tablesorter filters＆ajax pager
由於我的表中記錄的數量變得相當大，頁面的加載速度變慢（> 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年8月4日：
我現在人口與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，所以當我添加了這個條件，過濾器沒有被填充。
我也注意到，由於我通過ajax切換到人口，頁面大小設置爲30，儘管我只從數據庫中真正獲得每頁20條記錄，並且設置了大小：20.任何想法爲什麼會這樣被忽略？
'表。hasInitialized'標誌在所有小部件初始化後都會被設置，所以在用戶使用過濾器之前，上述函數可能無法執行。另外，如果列表沒有被用戶動態更新，最好在頁面初始化時獲取'filter_selectSource'之外的過濾器列表，然後將一個數組傳遞給此設置。 – Mottie