jQuery DataTables是一個基于jQuery的表格插件，它能輕松地將表格數據轉換成可搜索、可排序和可過濾的互動式表格，并支持大量的特性和自定義選項，是前端開發中常用的控件之一。
使用Datatables有一些基本步驟：
$(document).ready(function() { //頁面DOM結構加載完成后執行
$('#myTable').DataTable({ //定義數據表格，#myTable是table元素的id
"processing": true, //數據處理中的特效
"serverSide": true, //服務器端分頁
"ajax": { //數據源，可以使用URL或函數
"url": "data.php",
"type": "POST"
},
"columns": [ //指定數據列，可以是數據源中的字段名或自定義
{ "data": "id" },
{ "data": "name" },
{ "data": "age" },
{ "data": "email" },
{ "data": "phone" }
]
});
});其中的“data.php”是一個處理數據的腳本，例如：
<?php
require_once 'db.php'; //加載數據庫配置文件
$start = $_POST['start'] ?: 0; //起始行數
$length = $_POST['length'] ?: 10; //每頁數據行數
$column_arr = array( //定義數據列映射
0 =>'id',
1 =>'name',
2 =>'age',
3 =>'email',
4 =>'phone'
);
$order_column = $_POST['order'][0]['column']; //排序的列數
$order_dir = $_POST['order'][0]['dir']; //排序的方向
$order_colname = $column_arr[$order_column]; //排序列名
$total = $db->query('SELECT COUNT(*) FROM `table`')->fetchColumn(); //獲取數據總數
$data = $db->query("SELECT * FROM `table` ORDER BY $order_colname $order_dir LIMIT $start,$length")->fetchAll(PDO::FETCH_ASSOC); //獲取分頁數據
$output = array(
'draw' =>intval($_POST['draw']), //Datatables傳回的參數，用于標識請求次數
'recordsTotal' =>intval($total), //總數據量
'recordsFiltered' =>intval($total), //當前數據量
'data' =>$data //數據
);
echo json_encode($output); //輸出JSON格式數據
?>需要注意的是，使用Datatables需要引入jQuery庫和Datatables插件庫，例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Datatables Demo</title> <link rel="stylesheet" > </head> <body> <table id="myTable" class="display" style="width:100%"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <!-- 這里填充數據 --> </tbody> </table> <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="http://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> <script src="data-tables.js"></script> </body> </html>