使用数据表进行服务器端分页。这里表格的第一页已经在 HTML 中预加载。 这可以通过延迟加载数据来实现。以下链接已用于获取详细信息。
这里 deferLoading 值是硬编码的，那么如何动态传递这个“deferLoading”值。
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php",
"deferLoading": 57
} );
} );
下面的代码不起作用。有没有办法可以稍后更改 deferLoading 值？
function loadInitialData(){
//ajax call to load initial html data
var totalRecords = //get Value from server;
table.deferLoading = totalRecords;
table.fnDraw();
}
以下数据是由 Ajax 调用返回的
[ [0,'2021072701587','08:04:57'],
[1,'2021072701585','08:03:46'],
[2,'2021072701585','08:02:44']
]
但是从第二次开始，通过使用 using 我收到了这样的页数错误。
最佳答案
您可以通过初始(单独)Ajax 调用提供 deferLoading 值 - 例如，使用 jQuery ajax。然后，您可以在完成初始 Ajax 调用后将该值传递到 DataTable。
因此，假设我们已经构建了 HTML 表格并用一些数据填充了它:
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Start date</th>
<th>Office</th>
<th>Extn.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
<td>2011/04/25</td>
<td>Edinburgh</td>
<td>5421</td>
</tr>
<tr> ... and more initial rows... </tr>
</tbody>
</table>
然后我们可以使用如下脚本:
$(document).ready(function() {
$.ajax({
url: "YOUR_URL_HERE/preload-count"
})
.done(function( data ) {
initializeTable( data.count );
});
function initializeTable(deferDataCount) {
$('#example').DataTable( {
serverSide: true,
"deferLoading": deferDataCount,
ajax: {
url: "YOUR_URL_HERE/serverside-data",
},
"columns": [
{ "title": "ID", "data": "id" },
{ "title": "Name", "data": "name" },
{ "title": "Position", "data": "position" },
{ "title": "Salary", "data": "salary" },
{ "title": "Start Date", "data": "start_date" },
{ "title": "Office", "data": "office" },
{ "title": "Extn.", "data": "extn" }
]
});
}
} );
在上面的脚本中，我们首先调用以下 URL:
url: "YOUR_URL_HERE/preload-count"
这会返回一个简单的 JSON 结构，其中包含我们想要在 deferLoading 选项中使用的计数 - 所以，在我的例子中是这样的:
{
"count": 57
}
然后将该整数传递给我的 initializeTable(deferDataCount) 函数，其中 DataTable 使用我需要使用的计数进行初始化:
"deferLoading": deferDataCount,
现在，下次执行用户操作(分页/过滤/排序)时，DataTable 将使用其 URL 来获取下一页数据:
url: "YOUR_URL_HERE/serverside-data"
此 URL 将返回 DataTables 所需的所有 serverSide 值，包括行数据 JSON(在我的情况下)如下所示:
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
更新
这是我的完整网页，供引用，展示所有部分如何组合在一起:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Start date</th>
<th>Office</th>
<th>Extn.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
<td>2011/04/25</td>
<td>Edinburgh</td>
<td>5421</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "YOUR_URL_HERE/preload-count"
})
.done(function( data ) {
initializeTable( data.count );
});
function initializeTable(deferDataCount) {
$('#example').DataTable( {
serverSide: true,
"deferLoading": deferDataCount,
ajax: {
url: "YOUR_URL_HERE/serverside-data",
},
"columns": [
{ "title": "ID", "data": "id" },
{ "title": "Name", "data": "name" },
{ "title": "Position", "data": "position" },
{ "title": "Salary", "data": "salary" },
{ "title": "Start Date", "data": "start_date" },
{ "title": "Office", "data": "office" },
{ "title": "Extn.", "data": "extn" }
]
});
}
} );
</script>
</body>
</html>
关于jquery - 数据表 数据的延迟加载。如何动态传递 "deferLoading"值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68630701/