获取具有响应式扩展名的表中隐藏单元格的索引

Question

我有一个构建的jQuery DataTables和一个带有＆＃34;检查＆＃34;的按钮。在其中一个单元格中的类，我想在单击按钮后获取包含该按钮的单元格的索引。

为了达到这个目的，我一直在使用以下代码：

$("#table tbody").on('click','.checking',function(){
    var index = '';
    index = $("#table").DataTable().cell($(this).parents('td')).index();
    console.log(index);
});

当DataTables的Responsive扩展名没有隐藏单元格时，这一点工作正常，但是当隐藏该字段时，此函数会抛出undefined值。

查看按钮＆＃34; Go＆＃34;在下面的截图中。

Answer 1

原因

当响应式扩展隐藏列时，默认情况下，它会将所有内容放入单独的tr节点，其中一个td节点作为包含多个li节点的列表。

当您的单元格被隐藏时，代码cell($(this).parents('td'))因标记不同而停止工作。

解

• DataTables 1.10.11 + 和仅响应2.0.2 +

  $('#table tbody').on('click','.checking',function(){
      var index = $('#table').DataTable().cell($(this).closest('td, li')).index();
      console.log(index);
  });  
  

  有关代码和演示，请参阅this jsFiddle。

• DataTables 1.10 + 和响应式1.0.3 +

  此方法使用已弃用的方法responsive.index()，该方法可能会在将来的版本中删除，但不鼓励使用。

  $('#example tbody').on('click','.checking',function(){
      var $cellNode = $(this).closest('td, li');        
  
      var cell;
      if($cellNode.is('td')){
         cell = $('#example').DataTable().cell($cellNode);
      } else {
         var cellIdx = $('#example').DataTable().responsive.index($cellNode);
         cell = $('#example').DataTable().cell($cellNode);
      }
  
      var index = cell.index();
      console.log(index);
  });    
  

  有关代码和演示，请参阅this jsFiddle。