如何显示和隐藏使用数据表的列jquery

问题描述：

我需要显示和隐藏数据表的列做javascript测试后，但它不工作的好。如何显示和隐藏使用数据表的列jquery

这是我测试JavaScript：

if ($('#commune_to_display').val()==""){ 
    $('#utable td:nth-child(2)').hide(); 
    $('#commune_to ').hide(); 
}

该测试工作只是在数据表的第一页，分页后，列仍然是可见的。

我该如何解决？

答

您可以显示/隐藏列，如下所示。只需将3和4替换为您的实际列索引。

var table = $('#utable').DataTable(); 
table.column(3).visible(true); // To show 
table.column(4).visible(false); // To hide

答

JavaScript代码是这样的：

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "scrollY": "200px", 
     "paging": false 
    }); 

    $('a.toggle-vis').on('click', function (e) { 
     e.preventDefault(); 

     // Get the column API object 
     var column = table.column($(this).attr('data-column')); 

     // Toggle the visibility 
     column.visible(! column.visible()); 
    }); 
});

的html代码：

<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td> 
       <td>2011/04/25</td> 
       <td>$320,800</td> 
      </tr> 
</tbody> 
    </table>

您可以在这里浏览和运行完整的例子：https://datatables.net/examples/api/show_hide.html

如何显示和隐藏使用数据表的列jquery

相关推荐