DataTables如何重新加载数据

朴灿烈づ我的快乐病毒、 2022-01-09 07:03 591阅读 0赞

### 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/][http_www.datatables.club_reference_option]*

*[https://www.cnblogs.com/xiashengwang/p/8087181.html][https_www.cnblogs.com_xiashengwang_p_8087181.html]*

***DataTables国际化示例：***

*[https://blog.csdn.net/qq\_22690445/article/details/79682311][https_blog.csdn.net_qq_22690445_article_details_79682311]*

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

[http_www.datatables.club_reference_option]: http://www.datatables.club/reference/option/
[https_www.cnblogs.com_xiashengwang_p_8087181.html]: https://www.cnblogs.com/xiashengwang/p/8087181.html
[https_blog.csdn.net_qq_22690445_article_details_79682311]: https://blog.csdn.net/qq_22690445/article/details/79682311