我正在使用带有过滤器小部件的tablesorter jQuery插件,我想将实际过滤卸载到服务器。我看到窗口小部件有filter_serversideFiltering
选项,但我找不到任何关于如何设置的文档或示例。
我假设我需要至少提供一个用于发送AJAX请求的URL和一个用于处理响应的回调,但过滤器小部件文档似乎没有解释在何处或如何执行此操作。
(注意:我这里没有使用Pager插件,只是过滤器小部件。如果服务器端的装配依赖于寻呼机的AJAX设置,那么这也没有记录。)
答案 0 :(得分:1)
所有filter_serversideFiltering
选项都允许与寻呼机窗口小部件/插件集成,并防止在内容不匹配时隐藏表格中的任何行。
如果没有寻呼机小工具/插件,您需要绑定到filterEnd
事件并执行您自己的ajax调用。 Here is a demo使用filltext.com提供JSON数据,因此结果与过滤器不匹配,但您可以在过滤后看到它更新。您可以查看控制台网络选项卡以查看正在使用的实际URL。
HTML
<table class="tablesorter">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>First</th>
<th>Last</th>
<th>State</th>
<th>Info</th>
</tr>
</thead>
<tbody></tbody>
</table>
脚本
$(function () {
var $table = $('table'),
lastSearch = [],
updateAjax = function (filters) {
$.getJSON('http://www.filltext.com/?callback=?', {
// add the current filters to be serialized
// into a URL query string
// commented out here or filltext.com returns nothing
// 'filter': filters
// the following parameters are needed for
// filltext.com to return content
'rows': 10,
'#': '{index}',
'ID': '{randomNumberLength|3}',
'First': '{firstName}',
'Last': '{lastName}',
'State': '{usState|abbr}',
'Info': '{lorem|3}'
})
.done(function (data) {
buildTable(data);
});
},
buildTable = function (data) {
if (data) {
var col, row, txt,
headers = ['#', 'ID', 'First', 'Last', 'State', 'Info'],
len = headers.length,
rows = '';
size = data.length;
for (row = 0; row < size; row++) {
rows += '<tr>';
for (col = 0; col < len; col++) {
txt = data[row][headers[col]];
rows += '<td>' + txt + '</td>';
}
rows += '</tr>';
}
$table.find('tbody')
.html(rows)
.trigger('update');
}
};
$table.on('filterEnd', function (e, c) {
// prevent ajax spamming
var ls = c.$table.data('lastSearch');
if (lastSearch.join('-') !== ls.join('-') ) {
lastSearch = ls;
updateAjax(lastSearch);
}
})
.tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'filter'],
widgetOptions: {
// prevents rows from getting hidden
filter_serversideFiltering: true
}
});
});