目标:
*在服务器端处理中使用Datatable。如果你改变排序顺序，页码，应用搜索函数等，一个请求将被发送到后端，以便检索1000行(而不是总共30000行)。
*显示表中的数据
问题:
代码不工作，源代码的哪一部分我错过了，以显示数据的内容?
Jsbin:
https://jsbin.com/gohuwenese/edit?html, js、输出
信息:
*这是一个简单的示例。
*实际上，总共约有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" width="100%">
<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" }
]
});
TypeError: Cannot read property 'length' of undefined通常表示jQuery DataTables无法在Ajax请求的响应中找到数据。
使用默认格式或使用ajax。dataSrc选项定义包含Ajax响应中的表数据的数据属性(默认为数据)。
删除"json"从dataSrc和表中加载数据!
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" width="100%">
<thead>
<tr>
<th>postId</th>
<th>id</th>
<th>Name</th>
<th>Email</th>
<th>Body</th>
</tr>
</thead>
</table>
</div>
</body>
</html>