DataTables with AJAX
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/s/bs-3.3.5/jq-2.1.4,dt-1.10.10,cr-1.3.0/datatables.min.css">
<script src="https://cdn.datatables.net/s/bs-3.3.5/jq-2.1.4,dt-1.10.10,cr-1.3.0/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<table id="tbl" class="dataTable table">
<thead>
<tr>
<th>Digits</th>
<th>Words</th>
<th>Numbers</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a id="anch" href="#" > ajax.reload </a>
JavaScript
$(document).ready(function () {
//emulate ajax
$.mockjax({
url: '/test/0',
responseTime: 200,
responseText: {"data": [
["1", "abc", "123"],
["2", "def", "456"],
["3", "ghi", "789"],
["4", "jlm", "012"]
]}
});
table = $('#tbl').dataTable({
searching: false,
paging: false,
info: false,
"ajax": "/test/0",
});
var colReorder = new $.fn.dataTable.ColReorder(table);
$("#anch").on('click', function(){
table.api().ajax.reload(null, false);
});
})