DataTables插件绑定数据

为了使 DataTables 插件能够展示数据，我们需要将数据绑定到 HTML 表格中，可以通过两种方式实现：

1. 静态绑定数据

静态绑定数据是指在 HTML 中直接编写表格数据的方式，例如：

<table id="example">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tom</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jerry</td>
      <td>28</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mary</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

在这种方式下，表格数据是写死在 HTML 文件中的，不利于动态展示数据。

2. 动态绑定数据

动态绑定数据是指通过 JavaScript 将数据绑定到 HTML 表格中的方式，可以通过 jQuery 的 `DataTable()` 函数来实现。例如：

$(document).ready(function() {
  $('#example').DataTable({
    "ajax": "data.json", // 数据源
    "columns": [
      { "data": "id" },
      { "data": "name" },
      { "data": "age" }
    ] // 表格列定义
  });
});

以上代码中， `ajax` 参数指定了数据源，可以是一个 URL 或一个 JavaScript 对象。 `columns` 参数定义了表格的列，其中每个元素都是一个对应列的配置对象， `data` 属性指定了该列对应数据源中的哪个字段。

动态绑定数据可以实现动态展示数据，适用于数据量较大或需要频繁更新数据的场景。

以上就是 DataTables 插件绑定数据的两种方式，可以根据实际需求选择合适的方式。