问题描述
我有一个用服务器端分页初始化的数据表，它工作正常.该表在初始化期间触发 ajax、拉取数据并呈现到表上.但是，我最初需要空表并使用 load() 或 reload() 单击按钮加载表数据，例如:
I have a dataTable initialized with server side paging and it is working fine. This table triggers ajax, pulls data and renders onto the table during initialization. However I need empty table initially and load table data on click of a button using load() or reload() like:
myTable.api().ajax.reload();
这是我的表初始化:
function initTestTable(){
myTable = $('#testTable').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "testTableData.html",
"type": "GET",
},
"columns": [
{ "data": "code" },
{ "data": "description" }
]
});
}
应该有办法在初始化时限制表的加载吗?我阅读了文档但找不到.请提出建议.
There should be a way to restrict the loading of table during initialization? I read the documentation but could not find. Please suggest.
推荐答案
您可以使用 defer_loading 参数和将其设置为 0.这将延迟数据加载，直到过滤器、排序操作或绘制/重新加载 Ajax 以编程方式发生.
You could use the deferLoading parameter and set it to 0. This will delay the loading of data until a filter, sorting action or draw/reload Ajax happens programmatically.
function initTestTable(){
myTable = $('#testTable').dataTable({
"processing": true,
"serverSide": true,
"deferLoading": 0, // here
"ajax": {
"url": "testTableData.html",
"type": "GET",
},
"columns": [
{ "data": "code" },
{ "data": "description" }
]
});
}
要在单击按钮时触发 Ajax，您可以在处理程序中包含以下内容:
To trigger the Ajax when the button is clicked you can have something like the following in the handler:
function buttonClickHandler(event){
$('#testTable').DataTable().draw();
}
请参阅下面的示例进行演示.
See example below for demonstration.
$(document).ready(function() {
// AJAX emulation for demonstration only
$.mockjax({
url: '/test/0',
responseTime: 200,
response: function(settings){
this.responseText = {
draw: settings.data.draw,
data: [
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
[ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ]
],
recordsTotal: 1000,
recordsFiltered: 1000
};
}
});
$('#example').DataTable({
"processing": true,
"serverSide": true,
"deferLoading": 0,
"ajax": {
"url": "/test/0",
"type": "GET"
}
});
$('#btn-reload').on('click', function(){
$('#example').DataTable().draw()
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables/1.10.5/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<p>
<button id="btn-reload">Reload</button>
</p>
<table id="example" class="display" cellspacing="0" 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>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</body>
</html>这篇关于禁用初始自动 ajax 调用 - DataTable 服务器端分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
更多推荐
[db:关键词]
发布评论