Latest DataTable with ColReorder
HTML
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script src="https://datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/media/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/ColReorder/css/dataTables.colReorder.css">
<button id="btnReload">Reload Data</button>
<div id="container">
<table id="dataTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JavaScript
$(document).ready(function () {
var dt = $('#dataTable').dataTable({
bServerSide: true,
bSort: true,
dom: 'Rt',
fnServerData: function (sSource, aoData, fnCallback, oSettings) {
fnCallback({
"iTotalDisplayRecords" : 2,
"iTotalRecords" : 2,
"aaData" :[
["1A", "1B", "1C", "1D"]
]})
}
});
dt.fnDraw();
$('#btnReload').click(function () {
dt.fnDraw();
}).click();
});