数据表：是否可以根据下拉列表中的选择动态更改要查看的数据表的列？

Question

我有一个 DataTable，其中我想要一个下拉列表，其中包含 DataTable 的列名称列表和复选框。根据复选框中的选择，应仅使用这些列更新 DataTable。 这是我的JsFiddle 尝试实现同样的目标。

HTML：

<div class="button-group">
         <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Modify Columns</button>
         <ul class="dropdown-menu" id="checkboxlist"></ul>
</div>
<table id="example" class="display" cellspacing="0" width="100%"></table>

JavaScript：

AList = ["A", "B"];
    var selected = [];
    var sortlist = [];
    for (var i = 0; i < header.length; i++) {
        AList.push(header[i]);
    }
    $('#example').append("<thead style='background-color: rgb(159, 191, 223); !important'><tr></tr></thead>");
    for (var i = 0; i < AList.length; i++) {
        $('#example thead tr').append("<th style='background-color: rgb(159, 191, 223); !important'>" + AList[i] + "</th>");
$('#checkboxlist').append(' <li><a href="#" class="small" data-value="'+AList[i]+'" tabindex="-1"><input type="checkbox" />' +AList[i] + '</a></li>')

    }
    $('#example').append("<tbody></tbody>");
    $('#checkboxlist').append('<li><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> Update</button></li>');

有什么建议可以解决这个问题吗？

Answer 1

编辑：参考包括：http://www.w3schools.com/html/html_tables.asp， Check if checkbox is checked with jQuery，http://api.jquery.com/hide/，http://api.jquery.com/show/

您可以在与字母（A、B、c、d、e）和 show() 和 hide() 对应的列中添加类来控制视图。

代码：https://jsfiddle.net/eakwswfe/5/

不确定 jsfiddle 会保持多长时间作为备份，这是另一个使用 show() 和 hide() 和类的简单实现：

$( "#update" ).click(function() {
if($("#A:checkbox:checked").length == 0){
		$(".A").hide();
};
if($("#B:checkbox:checked").length == 0){
		$(".B").hide();
 }
if($("#c:checkbox:checked").length == 0){
		$(".c").hide();
 }
 if($("#d:checkbox:checked").length == 0){
		$(".d").hide();
 }
 if($("#e:checkbox:checked").length == 0){
    $(".e").hide();
 }
 
 if($("#A:checkbox:checked").length > 0){
		$(".A").show();
};
if($("#B:checkbox:checked").length > 0){
		$(".B").show();
 }
if($("#c:checkbox:checked").length > 0){
		$(".c").show();
 }
 if($("#d:checkbox:checked").length > 0){
		$(".d").show();
 }
 if($("#e:checkbox:checked").length > 0){
    $(".e").show();
 }
 
 
});

td.red{
  background-color: red;
}

td.blue{
  background-color: blue;
}

td.green{
    background-color: green;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body>
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Modify Columns</button>
<ul class="dropdown-menu" id="checkboxlist">
 <li><a href="#" class="small" data-value="A" tabindex="-1"><input id="A" type="checkbox">A</a></li> <li><a href="#" class="small" data-value="B" tabindex="-1"><input id="B" type="checkbox">B</a></li> <li><a href="#" class="small" data-value="c" tabindex="-1"><input id="c" type="checkbox">c</a></li> <li><a href="#" class="small" data-value="d" tabindex="-1"><input id="d" type="checkbox">d</a></li> <li><a href="#" class="small" data-value="e" tabindex="-1"><input id="e" type="checkbox">e</a></li><li class="open"><button aria-expanded="true" id="update" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> Update</button></li>
  
  
  
  
</ul></div>
<table id="example" class="display" cellspacing="0" width="100%">
    <tr>
    <th class='A'>A</th>
    <th class='B'>B</th> 
    <th class='c'>c</th>
    <th class='d'>d</th> 
    <th class='e'>e</th>
  </tr>
    <tr>
    <td class='A'><a href="url">green</a></td>
    <td class='blue B'>blue</td> 
    <td class='red c'>red</td>
    <td class='blue d'>blue</td> 
    <td class='green e'>green</td>
  </tr>
      <tr>
    <td class='A'><a href="url">green</a></td>
    <td class='blue B'>blue</td> 
    <td class='red c'>red</td>
    <td class='blue d'>blue</td> 
    <td class='green e'>green</td>
  </tr>
      <tr>
    <td class='A'><a href="url">green</a></td>
    <td class='blue B'>blue</td> 
    <td class='red c'>red</td>
    <td class='blue d'>blue</td> 
    <td class='green e'>green</td>
  </tr>
</table>



</body>