DataTable是一個非常方便的插件,可以將普通的HTML表格轉換成一個高級的交互性表格,同時還支持多種數據格式,包括JSON格式。
請求JSON數據后,我們需要對數據進行格式化以便DataTable能夠正確地顯示數據。下面是一個使用JSON格式請求數據,并對數據進行格式化的示例代碼:
$(document).ready(function() { $('#example').DataTable( { "ajax": { "url": "data.json", "dataSrc": function ( json ) { var return_data = []; for (var i=0;i< json.data.length; i++){ return_data.push({ 'id': json.data[i].id, 'name': json.data[i].name, 'position': json.data[i].position, 'office': json.data[i].office, 'age': json.data[i].age, 'start_date': json.data[i].start_date, 'salary': json.data[i].salary }) } return return_data; } }, "columns": [ { "data": "id" }, { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "age" }, { "data": "start_date" }, { "data": "salary" } ] } ); } );
在這個示例代碼中,我們首先使用ajax請求json數據,并通過"datasrc"選項來指定從json數據中提取數據的方法。然后我們使用JavaScript代碼將每行數據解析為一個對象,并將其推送到數組中。最后,我們返回格式化后的數據。
在DataTable中,我們可以使用"columns"選項來指定表格中每列的數據源。在這個示例代碼中,我們使用"data"屬性來指定每列要顯示的數據。
通過這個示例代碼,我們可以看到如何使用JSON格式請求數據,并通過格式化來讓DataTable正確顯示數據。希望這篇文章能幫助你更好地使用DataTable!