如何演示使用 Ajax 加载 DataTables 中的数据？

简介

DataTables 是一个流行的 JavaScript 插件，用于在 HTML 表格中添加交互功能，例如排序、搜索和分页。将其与 Ajax 结合使用，可以异步加载表格数据，提高用户体验。

实现步骤

步骤一：准备数据

首先，需要准备一个可以请求数据的 API。通常，API 会返回 JSON 格式的数据，例如：

{
    "data": [
        {
            "id": "1",
            "name": "John Doe",
            "age": "30"
        },
        {
            "id": "2",
            "name": "Jane Smith",
            "age": "25"
        }
    ]
}

步骤二：引入 DataTables 和 jQuery 库

在 HTML 页面中添加以下代码：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.24/r-2.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/datatables.min.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/v/bs4/jszip-2.5.0/dt-1.10.24/r-2.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/datatables.min.js"></script>

步骤三：初始化 DataTables

在 JavaScript 中添加以下代码：

$(document).ready(function() {
    $('#example').DataTable({
        "ajax": "/api/data",
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "age" }
        ]
    });
});

这里 'ajax' 参数指定了异步加载的数据，'columns' 参数指定了列名与 JSON 数据中的字段名的对应关系。

步骤四：展示表格

在 HTML 中添加以下代码：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
</table>

至此，引入 DataTables 和 jQuery 库、初始化 DataTables 和展示表格的工作均已完成。通过以上步骤，即可成功地使用 Ajax 加载 DataTables 中的数据。

参考链接

1. DataTables 官方文档
2. DataTables - Ajax 数据源