下面是详细讲解如何在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
- HTML结构
创建一个空的table元素,并添加一个ID,如下:
<table id="myTable">
</table>
- 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数据源中读取哪些数据。
示例说明
下面给出两个示例说明:
- 后端API接口返回的数据格式为JSON格式,并且有以下样式:
[
{
"user_id": 1,
"user_name": "Alice",
"age": 28,
"email": "alice@example.com",
"phone": "123456789"
},
{
"user_id": 2,
"user_name": "Bob",
"age": 30,
"email": "bob@example.com",
"phone": "987654321"
}
]
我们可以在columns
中指定:
"columns": [
{ "data": "user_id" },
{ "data": "user_name" },
{ "data": "age" },
{ "data": "email" },
{ "data": "phone" },
]
- 后端API接口返回的数据格式为JSON格式,并且有以下样式:
{
"recordsTotal": 27,
"recordsFiltered": 27,
"data": [
{
"user_id": 1,
"user_name": "Alice",
"age": 28,
"email": "alice@example.com",
"phone": "123456789"
},
{
"user_id": 2,
"user_name": "Bob",
"age": 30,
"email": "bob@example.com",
"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"。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:如何演示在DataTables中使用Ajax加载数据 - Python技术站