轉自 https://www.cnblogs.com/lyeo/p/4765514.htmlhtml
jquery.dataTables 版本1.10.7jquery
直接上代碼:ajax
0、tablejson
<table id="popReportTable"> <thead> <tr id="trId"> <td>顯示名,這裏能夠給tr一個id,而後用$("#trId").html("列名...")來改變顯示列名</td> </tr> </thead> <tbody> </tbody> </table>
一、生成動態列url
//dataTables的json返回的列名 var columnList = []; //顯示列對應的json字段 var columnStr = "Id,Name,Code,Age,Pwd"; colArr = columnStr.split(','); for (var i = 0; i < colArr.length; i++) { var obj = {}; obj['data'] = colArr[i]; columnList.push(obj); }
二、設置dataTables配置項spa
var settings = { "ajax": 'url地址', "retrieve": true, "columns": columnList };
三、dataTables建立而且生成(這麼寫的緣由:每次動態列字符串改變,dataTables也會跟着改變)code
//這樣寫就能把datatable徹底從新載入 $('#popReportTable').DataTable().clear(); $('#popReportTable').DataTable().destroy(); $('#popReportTable').DataTable(settings);
將配置項放後臺獲取,在獲取完畢後再獲取data。htm