Datatable 是一個流行的 jQuery 插件,可以方便地實現數據表格的分頁、排序、搜索等功能。如果需要使用 Datatable 提交 JSON 數據,可以采用以下方法:
1. 創(chuàng)建 Datatable 對象,并設置請求數據的 URL
var dataTable = $('#data_table').DataTable({ "ajax": { "url": "data.json", "dataSrc": "" }, "columns": [ {"data": "id"}, {"data": "name"}, {"data": "age"}, {"data": "gender"} ] });
2. 在服務器端處理 JSON 數據,并返回相應的 JSON 字符串
1, 'name' =>'張三', 'age' =>25, 'gender' =>'男'), array('id' =>2, 'name' =>'李四', 'age' =>30, 'gender' =>'女'), array('id' =>3, 'name' =>'王五', 'age' =>28, 'gender' =>'男') ); echo json_encode($data); ?>
3. 在 HTML 頁面中引入 Datatable 和 jQuery 庫,并初始化數據表格
<link rel="stylesheet" type="text/css" > <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> <table id="data_table"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody></tbody> </table> <script type="text/javascript"> $(document).ready(function(){ var dataTable = $('#data_table').DataTable({ "ajax": { "url": "data.php", "dataSrc": "" }, "columns": [ {"data": "id"}, {"data": "name"}, {"data": "age"}, {"data": "gender"} ] }); }); </script>
使用 Datatable 提交 JSON 數據可以方便地實現數據的獲取和顯示。需要注意的是,服務器端返回的 JSON 字符串必須符合 Datatable 的數據格式,即一個數組包含多個對象,每個對象表示一個數據行,對象的屬性名對應數據列名,屬性值對應數據值。