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

下面是详细讲解如何在DataTables中使用Ajax加载数据：

准备工作

首先要做的就是在你的网站中引入jQuery和DataTables插件，分别在head标签中添加以下代码：

<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Ajax实现DataTable

1. HTML结构

创建一个空的table元素，并添加一个ID，如下：

<table id="myTable">
</table>

1. JavaScript代码

在JavaScript中，我们需要初始化DataTable并指定Ajax数据源。并且在DataTable中设置一个列的数组，来告诉它每一列要从Ajax数据源中读取哪些数据。其中Ajax数据源应该是以JSON格式返回的数据，这些数据可以从你的网站后端服务器中获取得到。

代码示例：

$(document).ready(function () {
    $('#myTable').DataTable({
        "ajax": {
            "url": "pathToYourBackendAPI",
            "type": "GET",
            "dataType": "json",
        },
        "columns": [
            { "data": "user_id" },
            { "data": "user_name" },
            { "data": "age" },
            { "data": "email" },
            { "data": "phone" },
        ],
    });
});

这里需要注意的是:

• ajax属性中，必须要有一个url属性指向后端API接口的地址。

• columns属性中，必须指定哪些列要从Ajax数据源中读取哪些数据。

示例说明

下面给出两个示例说明：

1. 后端API接口返回的数据格式为JSON格式，并且有以下样式：

[
    {
        "user_id": 1,
        "user_name": "Alice",
        "age": 28,
        "email": "[e-mail]",
        "phone": "123456789"
    },
    {
        "user_id": 2,
        "user_name": "Bob",
        "age": 30,
        "email": "[e-mail]",
        "phone": "987654321"
    }
]

我们可以在columns中指定：

"columns": [
    { "data": "user_id" },
    { "data": "user_name" },
    { "data": "age" },
    { "data": "email" },
    { "data": "phone" },
]

1. 后端API接口返回的数据格式为JSON格式，并且有以下样式：

{
    "recordsTotal": 27,
    "recordsFiltered": 27,
    "data": [
        {
            "user_id": 1,
            "user_name": "Alice",
            "age": 28,
            "email": "[e-mail]",
            "phone": "123456789"
        },
        {
            "user_id": 2,
            "user_name": "Bob",
            "age": 30,
            "email": "[e-mail]",
            "phone": "987654321"
        }
    ]
}

我们可以在ajax中指定：

"ajax": {
    "url": "pathToYourBackendAPI",
    "type": "GET",
    "dataType": "json",
    "dataSrc": "data",
},
"columns": [
    { "data": "user_id" },
    { "data": "user_name" },
    { "data": "age" },
    { "data": "email" },
    { "data": "phone" },
],

这里注意: dataSrc属性用于指定返回结果的JSON路径。在本例中，数据位于属性"data"下，因此指定为"data"。