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（）以及类的另一个简单实现：

＆＃13;

$( "#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();
 }
 
 
});

＆＃13;

td.red{
  background-color: red;
}

td.blue{
  background-color: blue;
}

td.green{
    background-color: green;
}

＆＃13;

<!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>

＆＃13;

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

1 个答案: