Ordering 3 tables in DataTables (jQuery) -
i'm using datatables (http://datatables.net/) plugin jquery. have 3 tables same columns, different data, , want synchronize ordering them. i.e. order 1 table, want other tables ordered same column.
javascript code following:
$(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 works fine, except when call draw() method nothing else happens, seems js code stop executing after first draw().
could please me that?
it seems code causes infinite loop, since order() method causes order.dt event sent other tables, , other table handlers try order tables again.
you need set flag indicates whether ordering of other table in progress , should ignore order.dt event.
see example below corrected code , 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>
Comments
Post a Comment