Jav*_*uth 29 ajax jquery datatables datatables-1.10
我有一个使用服务器端分页初始化的dataTable,它工作正常.此表在初始化期间触发ajax,拉取数据并呈现到表中.但是我最初需要空表并使用load()或reload()点击按钮加载表数据,如:
myTable.api().ajax.reload();
这是我的表初始化:
function initTestTable(){
myTable = $('#testTable').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "testTableData.html",
"type": "GET",
},
"columns": [
{ "data": "code" },
{ "data": "description" }
]
});
}
在初始化期间应该有一种限制表加载的方法吗？我阅读了文档,但找不到.请建议.
JSe*_*ser 51
您可以使用deferLoading参数并将其设置为0.这将延迟数据加载,直到以编程方式进行过滤,排序操作或绘制/重新加载Ajax.
function initTestTable(){
myTable = $('#testTable').dataTable({
"processing": true,
"serverSide": true,
"deferLoading": 0, // here
"ajax": {
"url": "testTableData.html",
"type": "GET",
},
"columns": [
{ "data": "code" },
{ "data": "description" }
]
});
}
要在单击按钮时触发Ajax,您可以在处理程序中使用以下内容:
function buttonClickHandler(event){
$('#testTable').DataTable().draw();
}
请参阅下面的示例进行演示
$(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.net/1.10.5/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/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>