初始化数据表的代码,
jQuery('#table1').dataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false,
"aaSorting": [],
"oSearch": {
"bSmart": false
}
});
首先初始化表时,过滤器工作正常。当使用ajax调用更新表数据时,搜索框会冻结(它没有接受任何输入)。数据表更新代码,
var table1 = jQuery('#table1');
result = [];
if (data.length) {
jQuery.each(data, function(key, value) {
json = ['<span id="hexa" class="' + value.carrier_code + '">' + value.company_web_name + '</span>', value.city, value.state];
result.push(json);
})
}
//console.log(result);
table1.dataTable().fnClearTable();
table1.dataTable().fnAddData(result);
table1.dataTable().fnDraw();
这里&#39;数据&#39;从ajax调用返回。排序工作正常,但搜索输入框在更新表后没有任何输入(第一次加载时工作正常)。
答案 0 :(得分:0)
在初始化时始终创建对dataTable的引用,如下所示。
var table1 = $('#example').dataTable({...});
从现在开始,您可以将变量table1
用于将来的引用,例如清除/添加/绘图表。看看下面的演示。
var table1 = $('#example').dataTable({
"scrollCollapse": true,
"paging": false,
"aaSorting": [],
"oSearch": {
"bSmart": false
}
});
var result = [];
for ( var i=0; i< 10; i++ ) {
var json = [
'<span id="hexa" class="cc' + (i+1) + '">My Company ' + (i+1) + '</span>',
"City" + (i+1),
"State" + (i+1)
]
result.push(json);
}
table1.fnClearTable(); // No dataTable() here
table1.fnAddData(result); // No dataTable() here
table1.fnDraw(); // No dataTable() here
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
</tbody>
</table>
&#13;