首先,我通过以下代码启动所有数据表(有更多选项,但在此示例中添加了最小值)。下面的代码正在工作并启动所有数据表,如果该数据表具有搜索功能,它将使用参数初始化fnServerParams
。 (参数将转到后面的代码中的函数并运行)。
var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
dt.each(function () {
var e = {
sPaginationType: "full_numbers",
};
// If has external filters
if(!!jQuery(this).data("searchbox")) {
var search_box = jQuery(jQuery(this).data("searchbox"));
var additional_filters = [];
jQuery.each(search_box.find('input,select'), function(i, v){
additional_filters.push({
name: jQuery(v).attr('name'),
value: jQuery(v).val()
});
});
if (additional_filters.length > 0) {
e.fnServerParams = function (aoData) {
for (var i=0; i < additional_filters.length; i++) {
var filter = additional_filters[i];
aoData.push( { "name": filter.name, "value": filter.value } );
}
}
}
}
jQuery(this).dataTable(e);
});
}
问题是当我通过单击/更改事件调用函数
RefreshDataTables()
时。在函数中,我使用此简化版本进行刷新:PS:下面的所有代码都应解释为
RefreshDataTables()
中的var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
dt.each(function () {
var $oTable = jQuery(this).dataTable();
$oTable.fnDraw();
});
}
但是它不会更新搜索输入/选择的更改。它与以前保持相同。所以我尝试了基于this answer的代码:
var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
dt.each(function () {
var $oTable = jQuery(this).dataTable();
var search_box = jQuery(jQuery(this).data("searchbox"));
var additional_filters = [];
jQuery.each(search_box.find('input,select'), function(i, v){
additional_filters.push({
name: jQuery(v).attr('name'),
value: jQuery(v).val()
});
});
if (additional_filters.length > 0) {
$oTable._fnServerParams = function (aoData) {
for (var i=0; i < additional_filters.length; i++) {
var filter = additional_filters[i];
aoData.push( { "name": filter.name, "value": filter.value } );
}
}
}
$oTable.fnDraw();
});
}
但这没有用。没有错误,但数据仍然相同,没有任何更改。
最佳答案
在初始化期间,您只查询一次INPUT和SELECT的值。相反,您应该在每次从服务器请求数据时执行此操作。
因此,您可以修改初始化代码,以便在每次调用fnServerParams
定义的函数时检索INPUT和SELECT值。
下面我只是将您的代码移到fnServerParams
回调中。
var dt = jQuery(".dataTable");
if(jQuery().dataTable && dt.length > 0) {
dt.each(function () {
var e = {
sPaginationType: "full_numbers",
fnServerParams: function(aoData){
// If has external filters
if(!!jQuery(this).data("searchbox")) {
var search_box = jQuery(jQuery(this).data("searchbox"));
var additional_filters = [];
jQuery.each(search_box.find('input,select'), function(i, v){
additional_filters.push({
name: jQuery(v).attr('name'),
value: jQuery(v).val()
});
});
if (additional_filters.length > 0) {
for (var i=0; i < additional_filters.length; i++) {
var filter = additional_filters[i];
aoData.push( { "name": filter.name, "value": filter.value } );
}
}
}
}
};
jQuery(this).dataTable(e);
});
}
然后,调用
RefreshDataTables()
的$oTable.fnDraw()
应该可以工作。有关代码和演示,请参见下面的示例。请注意,我使用jQuery Mockjax插件只是为了演示Ajax请求,生产代码不需要它。
$(document).ready(function() {
// AJAX emulation for demonstration only
$.mockjax({
url: '/test/0',
responseTime: 200,
response: function(settings) {
console.log("Request data: ", settings.data);
this.responseText = {
"aaData": [
[
"Trident",
"Internet Explorer 4.0",
"Win 95+",
"4",
"X"
],
[
"Trident",
"Internet Explorer 5.0",
"Win 95+",
"5",
"C"
],
[
"Trident",
"Internet Explorer 5.5",
"Win 95+",
"5.5",
"A"
]
]
};
}
});
$('#example').dataTable({
"sAjaxSource": "/test/0",
"bServerSide": true,
"fnServerParams": function(aoData) {
// If has external filters
if (!!jQuery(this).data("searchbox")) {
var search_box = jQuery(jQuery(this).data("searchbox"));
var additional_filters = [];
jQuery.each(search_box.find('input,select'), function(i, v) {
additional_filters.push({
name: jQuery(v).attr('name'),
value: jQuery(v).val()
});
});
if (additional_filters.length > 0) {
for (var i = 0; i < additional_filters.length; i++) {
var filter = additional_filters[i];
aoData.push({
"name": filter.name,
"value": filter.value
});
}
}
}
}
});
$('#btn').on('click', function(){
$('#example').dataTable().fnDraw();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<p id="searchbox">
<input type="text" name="param1" value="" placeholder="param1">
<button id="btn" type="button">Search</button>
</p>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" data-searchbox="#searchbox">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</body>
</html>