Disable initial automatic ajax call - DataTable server side paging
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();
Here is my table initialization:
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.
Answer
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" }
]
});
}
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.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>