DataTables如何重新加载数据

最新推荐文章于 2021-12-04 14:15:59 发布

weixin_33888907

最新推荐文章于 2021-12-04 14:15:59 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/songzehao/p/10854259.html

博客主要介绍了DataTables加载数据和重新加载新数据的相关内容，还附上动态生成tr的代码，同时给出了DataTables更多属性介绍、国际化示例的参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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国际化示例：

https://blog.youkuaiyun.com/qq_22690445/article/details/79682311

转载于:https://www.cnblogs.com/songzehao/p/10854259.html