Ordering 3 tables in DataTables (jQuery)
I am using the DataTables plugin ( http://datatables.net/ ) for jQuery. I have 3 tables with the same columns but different data and I want to keep their order in sync. That is, then I order one table, I want the other tables to be ordered by the same column.
Below is the JavaScript code:
$(document).ready(function () {
var absTable = $('#absTable').DataTable();
var difTable = $('#difTable').DataTable();
var relTable = $('#relTable').DataTable();
$('#absTable').on( 'order.dt', function () {
var absOrder = absTable.order();
difTable.order( [ absOrder[0][0], absOrder[0][1] ] ).draw();
relTable.order( [ absOrder[0][0], absOrder[0][1] ] ).draw();
} );
$('#difTable').on( 'order.dt', function () {
var difOrder = difTable.order();
absTable.order( [ difOrder[0][0], difOrder[0][1] ] ).draw();
relTable.order( [ difOrder[0][0], difOrder[0][1] ] ).draw();
} );
$('#relTable').on( 'order.dt', function () {
var relOrder = relTable.order();
absTable.order( [ relOrder[0][0], relOrder[0][1] ] ).draw();
difTable.order( [ relOrder[0][0], relOrder[0][1] ] ).draw();
} );
});
I work fine, except when I call the method draw()
nothing else happens, it looks like the js code stops executing after the first one draw()
.
Can anyone help me with this?
source to share
Your code seems to be calling an endless loop as the order () method raises an event order.dt
sent to other tables and the other table handlers try to order the tables again.
You need to set a flag indicating if another table is being ordered and they should ignore the event order.dt
.
See example below for corrected code and demonstration.
$(document).ready(function() {
var absTable = $('#example1').DataTable({ dom: 't' });
var difTable = $('#example2').DataTable({ dom: 't' });
var relTable = $('#example3').DataTable({ dom: 't' });
var order_in_progress = false;
$('#example1').on( 'order.dt', function () {
if(!order_in_progress){
order_in_progress = true;
var absOrder = absTable.order();
difTable.order( [ absOrder[0][0], absOrder[0][1] ] ).draw();
relTable.order( [ absOrder[0][0], absOrder[0][1] ] ).draw();
order_in_progress = false;
}
} );
$('#example2').on( 'order.dt', function () {
if(!order_in_progress){
order_in_progress = true;
var difOrder = difTable.order();
absTable.order( [ difOrder[0][0], difOrder[0][1] ] ).draw();
relTable.order( [ difOrder[0][0], difOrder[0][1] ] ).draw();
order_in_progress = false;
}
} );
$('#example3').on( 'order.dt', function () {
if(!order_in_progress){
order_in_progress = true;
var relOrder = relTable.order();
absTable.order( [ relOrder[0][0], relOrder[0][1] ] ).draw();
difTable.order( [ relOrder[0][0], relOrder[0][1] ] ).draw();
order_in_progress = false;
}
} );
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example1" class="display" cellspacing="0" width="100%">
<thead>
<tr><th>Name</th><th>Size</th></tr>
</thead>
<tbody>
<tr><td>Small.mp3</td><td>200</td></tr>
<tr><td>Normal.mp3</td><td>300</td></tr>
<tr><td>Large.mp3</td><td>400</td></tr>
<tr><td>Smallest.mp3</td><td>100</td></tr>
</tbody>
</table>
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr><th>Name</th><th>Size</th></tr>
</thead>
<tbody>
<tr><td>Small.mp3</td><td>200</td></tr>
<tr><td>Normal.mp3</td><td>300</td></tr>
<tr><td>Large.mp3</td><td>400</td></tr>
<tr><td>Smallest.mp3</td><td>100</td></tr>
</tbody>
</table>
<table id="example3" class="display" cellspacing="0" width="100%">
<thead>
<tr><th>Name</th><th>Size</th></tr>
</thead>
<tbody>
<tr><td>Small.mp3</td><td>200</td></tr>
<tr><td>Normal.mp3</td><td>300</td></tr>
<tr><td>Large.mp3</td><td>400</td></tr>
<tr><td>Smallest.mp3</td><td>100</td></tr>
</tbody>
</table>
</body>
</html>
source to share