datatable用法详解

DataTables是一个流行的JavaScript库，用于对HTML表格进行动态交互，提供高级的分页、排序、搜索等功能。以下是使用DataTables的基本步骤：

1. 引入库：首先在HTML页面中引入DataTables的JS文件和CSS样式文件。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

2. HTML表格结构：创建基本的HTML表格，并给表头添加`data-*`属性，表示列标题和数据处理。

<table id="example" class="table table-bordered dataTable" style="width:100%">
  <thead>
    <tr>
      <th data-target="_all">列名</th>
      <!-- 添加更多的列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据填充 -->
  </tbody>
</table>

3. 初始化DataTable：在脚本部分，使用jQuery选择器找到表格元素，然后初始化DataTables实例。

$(document).ready(function() {
  $('#example').DataTable();
});

你可以通过`.DataTable(options)`传递配置选项，例如自适应列宽、搜索框集成等。