Question

我正在为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()之后停止执行。

有人可以帮助我吗？

Answer 1

您的代码似乎导致无限循环，因为order()方法会导致order.dt事件发送到其他表，而其他表处理程序会尝试再次对表进行排序。

您需要设置一个标志，指示其他表的排序是否正在进行，并且他们应该忽略order.dt事件。

请参阅下面的示例，了解更正后的代码和演示。

＆＃13;

$(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;
        }
    } );
});

＆＃13;

<!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>

＆＃13;

在DataTables（jQuery）中排序3个表

1 个答案: