JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.10.5/jquery.dataTables.min.js"></script>
<table id="example" width="100%" height="100%" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>Column 0</th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th>
</tr>
</thead>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>6</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>5</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>4</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>3</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>0</td>
<td>2</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
JavaScript
$(document).ready(function() {
$('#example').DataTable({
"dom": 'R<"H"lfr>t<"F"ip>'
});
var table = $("#example").DataTable();
var flag = 0;
$('#example').on('order.dt', function (e)
{
//alert("Order " + table.order() + (flag ? " When ordered by code" : " When clicked"));
console.log("Order " + table.order() + (flag ? " When ordered by code" : " When clicked"));
if(flag == 0)
{
flag = 1; // To disable infinite looping
table.order([1,"asc"],[table.order()[0][0],table.order()[0][1]]).draw();
flag = 0;
}
});
});