Question

我一直在使用JQUERY DATATABLES，我终于能够添加此处的“隐藏列”功能：https://datatables.net/examples/api/show_hide.html

但是，我使用的是按钮下拉列表，而不是使用超链接，如下所示：

 <div class = "btn-group">      
   <button type = "button" class = "btn btn-default btn-xs dropdown-toggle" data-toggle = "dropdown">
   Hide Column
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
     <li><a class="toggle-vis" data-column="1">Booking</a></li>
     <li><a class="toggle-vis" data-column="2">Quote</a></li>
     <li><a class="toggle-vis" data-column="3">Line</a></li>
     ...// and so on
   </ul>
 </div>

以下是将数据列链接到数据表并隐藏列的JQUERY：

 var table = $('#dataTable').DataTable();

 $('a.toggle-vis').on('click', function(e) {
   e.preventDefault();
   var column = table.column($(this).attr('data-column'));
   column.visible(! column.visible());

   ** EDIT **
   $(this).toggleClass("dropSelected");
 });

我想要做的是，当一个或多个下拉选项已经完成（并且列已被隐藏）时，选中下拉列表并选中或更改选择的颜色。这样，用户将立即知道哪个列已被隐藏。

当然，另一方面，如果用户点击链接使列再次可见，则检查或颜色需要消失，因为列将再次可见。

 ** EDIT **

将CSS添加到页面顶部：

a.toggle-vis.dropSelected {color: red;}

Answer 1

鉴于您的所有列都处于可见状态，并且点击a.toggle-vis会更改其可见性，您只需切换元素的类：

$('a.toggle-vis').on('click', function(e) {
   e.preventDefault();
   var column = table.column($(this).attr('data-column'));
   column.visible(! column.visible());

   this.toggleClass("hidden");
 });

并使用CSS来满足a.toggle-vis.hidden的呈现方式

如果选择了下拉选择，则JQUERY标记/样式化

1 个答案: