DataTables with AJAX
HTML
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/colreorder/1.1.0/css/dataTables.colReorder.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/colreorder/1.1.0/js/dataTables.colReorder.js"></script>
<table id="tbl" class="dataTable">
<thead>
<tr>
<th>Num</th>
<th>Alph</th>
<th>Digs</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<a id="anch" href="#" > Refresh </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);
});
})