DataTables如何重新加载数据

本文主要是介绍DataTables如何重新加载数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

DataTables加载数据

// 调用ajax请求数据
g.ajax("/srp/data", data, function (jsonStr) {// setValue为table的tbody动态生成tr，并渲染数据setValue(JSON.parse(jsonStr));// 初始化DataTablesvar 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));// 照常初始化DataTablesvar 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");// 在此之前可以清空所有旧的trtable.empty();var data = jsonStr[clsName];for (var i = 0; i < data.length; i++) {// 生成trvar $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国际化示例：

https://blog.csdn.net/qq_22690445/article/details/79682311

这篇关于DataTables如何重新加载数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---