在DataTables中排序3个表(jQuery)
在DataTables中排序3个表(jQuery)
提问于 2015-06-13 17:54:27
我正在使用jQuery的DataTables (http://datatables.net/)插件。我有3个表，列相同，但数据不同，我希望对它们进行同步排序。即，然后我排序一个表，我希望其他表按相同的列排序。
JavaScript代码如下：
$(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();
} );
});我工作得很好，除了当我调用draw()方法时，没有其他事情发生，就像js代码在第一次draw()之后停止执行一样。
有没有人能帮我一下？
回答 1
Stack Overflow用户
发布于 2015-06-13 23:10:54
看起来你的代码会导致无限循环，因为order()方法会导致将order.dt事件发送到其他表，而其他表处理程序会再次尝试对表进行排序。
您需要设置一个标志，指示是否正在对其他表进行排序，并且它们应该忽略order.dt事件。
请参阅下面的示例以了解更正后的代码和演示。
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30817332
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号