DataTables如何重新加载数据
DataTables加载数据
// 调用ajax请求数据
g.ajax("/srp/data", data, function (jsonStr) {
// setValue为table的tbody动态生成tr,并渲染数据
setValue(JSON.parse(jsonStr));
// 初始化DataTables
var table = $('#datatable-buttons8').DataTable({
// DataTables的配置属性:http://www.datatables.club/reference/option/
lengthChange: false,
buttons: ['copy', 'excel', 'pdf']
});
table.buttons().container()
.appendTo('#datatable-buttons8_wrapper .col-md-6:eq(0)');
}, null, null);
DataTables重新加载新数据
// 再次调用ajax请求新数据
g.ajax("/srp/data", data, function (jsonStr) {
// 清空DataTables数据
$("#datatable-buttons8").dataTable().fnClearTable();
// 销毁旧的DataTables对象,以便初始化新的DataTables
$("#datatable-buttons8").dataTable().fnDestroy();
// 动态生成tr,并渲染数据
setValue(JSON.parse(jsonStr));
// 照常初始化DataTables
var table = $('#datatable-buttons8').DataTable({
// DataTables的配置属性:http://www.datatables.club/reference/option/
lengthChange: false,
buttons: ['copy', 'excel', 'pdf']
});
table.buttons().container()
.appendTo('#datatable-buttons8_wrapper .col-md-6:eq(0)');
}, null, null);
附上动态生成tr的代码:
// setValue根据clsName的不同进入setTableValue
function setTableValue(clsName, jsonStr) {
var table = $("." + clsName + " tbody");
// 在此之前可以清空所有旧的tr
table.empty();
var data = jsonStr[clsName];
for (var i = 0; i < data.length; i++) {
// 生成tr
var $trTemp = $("<tr></tr>");
var obj = data[i];
var keys = Object.keys(obj);
var attrCount = keys.length;
for (var j = 0; j < attrCount; j++) {
// 生成td
$trTemp.append("<td>"+ obj[keys[j]] +"</td>");
}
$trTemp.appendTo(table);
}
}
DataTables更多属性介绍:
http://www.datatables.club/reference/option/
https://www.cnblogs.com/xiashengwang/p/8087181.html
DataTables国际化示例: