Datatables jquery展开/折叠和动画

Question

我正在使用datatables插件和当前代码我已展开/折叠当td中的图像被点击，但我想能够点击行来展开请任何人都可以帮助这个？下面是代码：

  $(document).ready(function() { 
      /* 
      * Insert a 'details' column to the table 
      */ 
      var nCloneTh = document.createElement('th'); 
      var nCloneTd = document.createElement('td'); 
      nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">'; 
      nCloneTd.className = "center"; 

      $('#example thead tr').each(function() { 
       this.insertBefore(nCloneTh, this.childNodes[0]); 
      }); 

      $('#example tbody tr').each(function() { 
       this.insertBefore( nCloneTd.cloneNode(true), this.childNodes[0]); 
      }); 

      /* 
      * Initialse DataTables, with no sorting on the 'details' column 
      */ 
      var oTable = $('#example').dataTable({ 
       "aoColumnDefs": [ 
        { "bSortable": false, "aTargets": [ 0 ] } 
       ], 
       "aaSorting": [[1, 'asc']] 
      }); 

      /* Add event listener for opening and closing details 
      * Note that the indicator for showing which row is open is not controlled by DataTables, 
      * rather it is done here 
      */ 
      $('#example tbody td').live('click', function() { 
       var nTr = this.parentNode.parentNode; 
       if (this.src.match('details_close')) 
       { 
        /* This row is already open - close it */ 
        this.src = "../examples_support/details_open.png"; 
        oTable.fnClose(nTr); 
       } 
       else 
       { 
        /* Open this row */ 
        this.src = "../examples_support/details_close.png"; 
        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); 
       } 
      }); 
     }); 

其次，我想展开和折叠成为一个平滑的动画有人能告诉我该怎么做？

感谢

Answer 1

对于你的问题的第一部分：

$('#example tbody tr').live('click', function() {...} 

对于第二部分，找到jquery.dataTables.js this.fnOpen = function(nTr, sHtml, sClass)然后找到fnOpen方法中这一行：

$(nNewRow).insertAfter(nTr); 

更改为：

$(nNewRow).css('display','none').insertAfter(nTr).slideDown(); 

或任何您选择的动画是。

这是未经测试，但像这样的东西肯定会工作。

Answer 2

如果您的新行代码中有div，则可以执行以下操作。在我的新行中，我有一个innerDetails类的div。下面是我所做的：

jquery.dataTables.js的5648线是：

$(nNewRow).insertAfter(nTr); 

将其更改为：

var innerDetails = $(nNewRow).find('div.innerDetails'); 
innerDetails.css('display', 'none'); 
$(nNewRow).insertAfter(nTr); 
innerDetails.slideDown(); 

这是它应该工作开箱即用的方式，海事组织。

Answer 3

我的解决办法：

JS

$(document).ready(function() { 
...... 
$('.datatable-header-footer').on('draw.dt', function() { 
       bindRowToggle(); 
      }); 

      $('.datatable-header-footer').on('processing.dt', function() { 
       bindRowToggle(); 
      }); 

      $('.datatable-header-footer').on('search.dt', function() { 
       bindRowToggle(); 
      }); 

      bindRowToggle(); 
     }); 

     function bindRowToggle() { 
      $('tr.parentOrder').click(function() { 
       $(this).nextAll(':lt(2)').toggle(); 
      }); 
     } 

CSS

.parentOrder { 

} 

.childOrder { 
    display: none; 
} 

HTML

<table class="table datatable-header-footer text-nowrap"> 
... 
<tr class="parentOrder"></tr> 
<tr class="childOrder"></tr> 
<tr class="childOrder"></tr>