jQuery DataTables 是一個非常方便的插件,可以讓我們快速構建數據表格。在實際應用中,有時候需要根據不同的情況動態地控制表格的列。下面我們將介紹如何使用 jQuery DataTables 實現動態列的功能。
// HTML 代碼 <table id="example"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>Jack</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Lucy</td> <td>24</td> <td>Female</td> </tr> </tbody> </table> // JS 代碼 $(document).ready(function() { var myColumns = [ { data: "Name", title: "姓名" }, { data: "Age", title: "年齡" }, { data: "Gender", title: "性別" } ]; var myData = [ { Name: "Jack", Age: "25", Gender: "Male" }, { Name: "Lucy", Age: "24", Gender: "Female" } ]; $('#example').DataTable({ columns: myColumns, data: myData }); // 動態改變列 $('#changeColumns').on('click', function() { // 請求新數據 var newData = [ { Name: "Tom", Age: "28", Location: "北京" }, { Name: "Lily", Age: "23", Location: "上海" }, { Name: "Jerry", Age: "32", Location: "深圳" } ]; // 動態設置列名 var newColumns = [ { data: "Name", title: "姓名" }, { data: "Age", title: "年齡" }, { data: "Location", title: "所在地" } ]; // 銷毀原表格 $('#example').DataTable().destroy(); // 重新加載數據和列 $('#example').DataTable({ columns: newColumns, data: newData }); }); });
在上述代碼中,我們首先初始化了一個數據表格,表頭為 Name、Age、Gender,表體有兩行數據。然后我們通過一個按鈕的點擊事件實現了動態改變列的功能。具體實現步驟如下:
- 定義新的數據和列名。
- 銷毀原來的表格。
- 重新加載數據和列名。
通過這種方式,我們能夠方便地動態改變表格的列,并且不需要刷新整個頁面。