2019獨角獸企業(yè)重金招聘Python工程師標準>>>

dataTables的表格只能初始化一次，這樣如果需要動態(tài)改變表格數(shù)據(jù)的話就需要寫多個表格，這樣很顯然不是一個好的解決方案。

dataTables Api提供了刷新數(shù)據(jù)解決方案：

這里大概說一下案例：在一個頁面中有多個tab，每個tab對應(yīng)一個表格，表格頭都是一致的，只是內(nèi)容不一致。為了提高接口效率，后臺會提前請求數(shù)據(jù)存在node中，前端是一次性請求全部數(shù)據(jù)，所以表格數(shù)據(jù)的刷新是本地數(shù)據(jù)的填充。

初始化代碼：

$(document).ready(function($) { //初始化配置$('#detailTable').dataTable({paging: false,searching: false,info: false,columns: [{ //根據(jù)接口傳過來的字段進行設(shè)置data: "name"}, {data: "department"}, {data: "dsm"}, {data: "signin_time"}, {data: "questionaire_time"}]}); });

刷新數(shù)據(jù)代碼

//初始化會議詳情數(shù)據(jù) function initDetailTableData(dataArr) { //dataArr是表格數(shù)據(jù)數(shù)組，和初始化配置需一樣的結(jié)構(gòu)var table = $('#detailTable').dataTable();var oSettings = table.fnSettings(); //這里獲取表格的配置table.fnClearTable(this); //動態(tài)刷新關(guān)鍵部分語句，先清空數(shù)據(jù)for (var i = 0, l = dataArr.length; i < l; i++) {table.oApi._fnAddData(oSettings, dataArr[i]); //這里添加一行數(shù)據(jù)}oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();table.fnDraw();//繪制表格 }

轉(zhuǎn)載于:https://my.oschina.net/keysITer/blog/806369

總結(jié)

以上是生活随笔為你收集整理的dataTables本地刷新数据解决只能初始化一次问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。