使用服务器端处理显示表中的数据
Posted
技术标签:
【中文标题】使用服务器端处理显示表中的数据【英文标题】：Display data in the table by using Server-side processing 【发布时间】：2021-10-11 09:50:51 【问题描述】：目标： *使用与服务器端处理相关的数据表。 如果您更改排序顺序、页码、应用搜索功能等。将向后端发送请求以检索 1000 行（而不是总共 30 000 行）。 *在表格中显示数据。
问题： 代码不起作用，为了显示数据的内容，我缺少源代码的哪一部分？
Jsbin:https://jsbin.com/gohuwenese/edit?html,js,output
信息： *这是一个简单的示例。 *实际上，总行数约为 30 000 行，您无法同时显示所有数据。 您只能显示一个页码（每个页码包含大约 1000 行）。 *https://datatables.net/examples/server_side/simple.html
谢谢！
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="description" content="Search Button Handler">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
</head>
<body>
<div class="container">
<table id="example" class="display" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
$('#example').DataTable(
"processing": true,
"serverSide": true,
"ajax":
url:"https://jsonplaceholder.typicode.com/comments",
dataType:"json"
,
"columns": [
"data": "postId" ,
"data": "id" ,
"data": "name" ,
"data": "email" ,
"data": "body"
]
);
【问题讨论】：
您是否检查过为什么您的浏览器网络工具会出现脚本错误？ 【参考方案1】：错误 TypeError: Cannot read property 'length' of undefined 通常表示 jQuery DataTables 在 Ajax 请求的响应中找不到数据。
使用默认格式或使用 ajax.dataSrc 选项在 Ajax 响应中定义包含表数据的数据属性（默认为数据）。
从您的dataSrc 中删除“json”，您的表将加载数据！
var table = $('#example').DataTable(
"processing": true,
"serverSide": true,
"ajax":
url:"https://jsonplaceholder.typicode.com/comments",
dataSrc: ""
,
"columns": [
data: "postId" ,
data: "id" ,
data: "name" ,
data: "email" ,
data: "body"
]
);<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="description" content="Search Button Handler">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
</head>
<body>
<div class="container">
<table id="example" class="display" >
<thead>
<tr>
<th>postId</th>
<th>id</th>
<th>Name</th>
<th>Email</th>
<th>Body</th>
</tr>
</thead>
</table>
</div>
</body>
</html>【讨论】：
如果这个答案有帮助，请不要忘记投票/接受:)以上是关于使用服务器端处理显示表中的数据的主要内容，如果未能解决你的问题，请参考以下文章
在 DataTables 服务器端处理脚本中运行 MySQL 查询
如何在我的数据表 ajax 服务器端数据中添加下拉列表以使用数据表列显示到表中