Datatables是一款非常強大的JavaScript插件,它能夠快速地將HTML表格轉換成交互式的數據展示界面。而使用Datatables進行數據展示的核心就是JSON數組。
var dataArray = [ {"name": "John", "age": 28, "gender": "male"}, {"name": "Alice", "age": 35, "gender": "female"}, {"name": "Bob", "age": 42, "gender": "male"} ];
上述代碼示例展示了一個簡單的JSON數組,我們可以將其傳遞給Datatables進行展示。通過使用Datatables提供的API,我們可以配置表格的各種屬性,包括分頁、排序、搜索等。具體操作如下:
$(document).ready(function(){ $('#myTable').DataTable({ data: dataArray, columns: [ {data: 'name'}, {data: 'age'}, {data: 'gender'} ] }); });
上述代碼中,我們使用了jQuery的document.ready()方法來確保頁面加載完畢后才執行Datatables的初始化代碼。之后,我們通過傳遞"data"和"columns"兩個參數來配置表格。其中,"data"參數為我們剛才提到的JSON數組,而"columns"參數則是一個包含了表格每一列的定義。這里我們定義了3列,分別是"name"、"age"和"gender"。通過上述代碼,我們可以快速、輕松地將JSON數組展示為一個交互式的表格。