如何通过单个JavaScript文件为HTML表格实现简易Datatable功能？

1. 整体设计原则 #

• 全程不依赖第三方库，所有逻辑封装在单个.js文件里，对外只留1个初始化函数，入门用户只要引入JS+一行代码调用就能用
• 只保留核心刚需功能：分页、搜索筛选、表头排序，砍掉非必要扩展功能，降低理解和使用成本
• 兼容原生HTML表格，也适配你已经在用的PHP输出数据/XML请求拉取数据的场景，不用修改现有后端逻辑

2. 核心逻辑拆解 #

2.1 初始化绑定逻辑 #

写一个全局可调用的函数，比如initSimpleDatatable(选择器, 配置项)，按顺序执行以下操作：

• 获取页面上对应位置的原生<table>DOM节点，把原表格的表头、行数据全部缓存到JS变量里，避免反复操作DOM拖慢运行速度
• 在表格前后自动插入需要的UI元素：顶部搜索输入框、分页控制栏，无需用户手动写额外HTML
• 给所有需要交互的元素（搜索框、排序表头、分页按钮）绑定事件监听

2.2 核心功能实现 #

搜索功能

• 监听搜索框的input事件，每次用户输入就遍历缓存的所有行数据，匹配任意单元格包含输入内容的行
• 匹配到的行显示，未匹配到的隐藏，同时同步刷新分页计数

表头排序功能

• 给每个表头<th>绑定点击事件，点击时判断当前排序方向（正序/倒序）
• 按点击的表头对应的列索引，对缓存的所有行数据做排序，排序完成后重新渲染表格内容

分页功能

• 提前定义每页显示行数（可留配置项给用户自定义），计算总页数
• 点击分页按钮时，只渲染当前页码对应区间的行数据，其他行隐藏
• 动态更新分页状态：当前页码、总页数、上一页/下一页按钮是否可点击

2.3 数据兼容处理 #

• 如果是PHP直接输出静态表格：初始化时直接读取表格里已经存在的DOM内容缓存即可，不用修改现有PHP代码
• 如果是XML请求拉取动态数据：提供一个配置项传入数据接口地址，内部封装XMLHttpRequest逻辑，拉取到数据之后自动生成表格行，适配你已经调试通过的XML请求逻辑

3. 最简使用示例 #

完成单JS文件开发后，用户使用方式非常简单：

<!-- 1. 引入开发好的单JS文件 -->
<script src="simple-datatable.js"></script>

<!-- 2. 正常写HTML表格，或者由PHP直接输出表格内容 -->
<table id="myTable">
  <thead>
    <tr><th>姓名</th><th>年龄</th></tr>
  </thead>
  <tbody>
    <!-- PHP输出行或者后续XML请求填充均可 -->
  </tbody>
</table>

<!-- 3. 一行代码初始化 -->
<script>
initSimpleDatatable('#myTable', {
  pageSize: 10, // 自定义每页显示10条
  enableSearch: true // 开启搜索功能
})
</script>

内容的提问来源于stack exchange，提问作者user8355629