js datatable

// 引入 DataTables 库
// <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
// <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
// <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

$(document).ready(function() {
    // 初始化 DataTable
    $('#example').DataTable();
} );

// HTML 部分
// <table id="example" class="display" style="width:100%">
//     <thead>
//         <tr>
//             <th>Name</th>
//             <th>Position</th>
//             <th>Office</th>
//             <th>Age</th>
//             <th>Start date</th>
//             <th>Salary</th>
//         </tr>
//     </thead>
//     <tbody>
//         <tr>
//             <td>Tiger Nixon</td>
//             <td>System Architect</td>
//             <td>Edinburgh</td>
//             <td>61</td>
//             <td>2011/04/25</td>
//             <td>$320,800</td>
//         </tr>
//         <!-- 更多行数据 -->
//     </tbody>
//     <tfoot>
//         <tr>
//             <th>Name</th>
//             <th>Position</th>
//             <th>Office</th>
//             <th>Age</th>
//             <th>Start date</th>
//             <th>Salary</th>
//         </tr>
//     </tfoot>
// </table>

解释说明

1. 引入库：首先需要引入 DataTables 的 CSS 和 JavaScript 文件，以及 jQuery 库。
2. 初始化 DataTable：在 $(document).ready 函数中，使用 $('#example').DataTable(); 来初始化表格。#example 是表格的 ID。
3. HTML 结构：表格需要有标准的 HTML 结构，包括 <thead>、<tbody> 和 <tfoot> 部分。表格的内容可以动态生成或静态定义。

这样，一个简单的 DataTable 就创建好了，具备分页、排序和搜索功能。