dataTables colReorder server-side
by olemoign
HTML
<script src="https://cdn.datatables.net/v/dt/dt-2.0.2/cr-2.0.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-2.0.2/cr-2.0.0/datatables.min.css">
<table class="display" style="width:100%">
<thead>
<tr>
<th data-data="name">Name</th>
<th data-data="position">Position</th>
<th data-data="office">Office</th>
<th data-data="extn">Extn.</th>
<th data-data="start_date">Start date</th>
<th data-data="salary">Salary</th>
</tr>
</thead>
</table>
CSS
.bold {
font-weight: bold;
}
JavaScript
function makeBold(row) {
$(row).find('td').each(function() {
$(this).wrapInner('<div class="bold"></div>');
});
}
function getData() {
return {
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011-04-25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011-07-25",
"office": "Tokyo",
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009-01-12",
"office": "San Francisco",
"extn": "1562"
},
{
"id": "4",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012-03-29",
"office": "Edinburgh",
"extn": "6224"
},
{
"id": "5",
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008-11-28",
"office": "Tokyo",
"extn": "5407"
},
{
"id": "6",
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012-12-02",
"office": "New York",
"extn": "4804"
},
{
"id": "7",
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012-08-06",
"office": "San Francisco",
"extn": "9608"
},
{
"id": "8",
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010-10-14",
"office": "Tokyo",
"extn":...