DataTables用Ajax載入動態表格__Ajax

需要引入以下檔案

<script src="<%=request.getContextPath()%>/static/js/plugins/dataTables/datatables.min.js"></script>

可能還需要jQuery的檔案，不過我工程引入的東西太多了，如果不能正常顯示表格請自行引入其他需要的檔案

 <table class="table table-bordered jambo_table bulk_action table-striped table-hover"       id="dataList">//樣式一定要寫上    <thead>    <tr class="headings">    <th>    <th width="10%" >法規檔案名稱</th>    <th width="10%">關鍵字</th>    <th width="20%">頒布機構</th>    <th width="10%">頒布日期</th>    <th width="10%">文檔附件</th>    <th width="10%">發布狀態</th>    <th width="10%">審核狀態</th>    <th width="10%">操作</th>    <th width="10%">功能</th>      </tr>    </thead>    <tbody>//Ajax請求的json格式資料填充    </tbody></table>

<thead></thead>標籤是DataTables的頭部，<tbody></tbody>是資料，這裡用Ajax請求的json格式資料填充，所以空著不寫。

接下來初始化DataTable

$('#dataList').DataTable( {"autoWidth": false,//當重複重新整理表格時，我的頁面會出現變形的，現象，加了這個就好了"serverSide": true,"ajax": {url:  CONST_URL.LIST ,//請求的urlmethod: "POST",data: {//請求的參數lareName: $('#lareName').val(),keyWord: $('#keyWord').val(),issUnitName: $('#issUnitName').val(),repStat: $('#repStat').val(),veriStat: $('#veriStat').val(),startDate: $('#startDate').val(),endDate: $('#endDate').val(),},},"columnDefs": [//對table格式的定義（表格的列從0開始）       {   "targets": 0,//這一列是id，但是不想再最上層顯示，"visible": false,表示隱藏   "visible": false,},   targets: 8,//根據樣式fa-pencil-square，把第8列顯示為一個表徵圖的樣式   render: function (data, type,row) {   return '<i class="fa fa-pencil-square text-navy fa-lg " guid="'+row.guid+'"></i>  '+  '<i class="fa fa-trash text-danger fa-lg " guid="'+row.guid+'"></i>';   }                              },       {   targets: 9,//把第九列的樣式改為超連結   render: function (data, type,row) {   return '<a href="">審核</a>';   }                              }],  "columns": [//返回的json資料在這裡填充，注意一定要與上面的<th>數量對應，否則排版出現扭曲    {"data": "guid"},    { "data": "lareName" },    { "data": "keyWord" },    { "data": "issUnitName" },    { "data": "releTime" },    { "data": "lareType" },    { "data": "repStat" },    { "data": "veriStat" }]    } );