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

Z时代
2024-01-10
分类：问答

我有一个DataTable，我想要有一个下拉列表，其中有复选框的DataTable的列名称的列表。根据复选框中的选择，DataTable应该仅更新为那些列。这里是我的JsFiddle试着实现一样。DataTables：是否可以根据下拉列表中的选项动态更改Datatable的列进行查看？

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>');

如何去这个问题有什么建议？

回答：

编辑：参考文献包括：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）和显示（）和隐藏（）来控制视图。

编号：https://jsfiddle.net/eakwswfe/5/

不知道的jsfiddle多久会这样熬夜作为备份，这里是用show（）和hide（）和类另一个简单的实现：

$("#update").click(function() {  
if($("#A:checkbox:checked").length == 0){  
\t \t $(".A").hide();  
};  
if($("#B:checkbox:checked").length == 0){  
\t \t $(".B").hide();  
}  
if($("#c:checkbox:checked").length == 0){  
\t \t $(".c").hide();  
}  
if($("#d:checkbox:checked").length == 0){  
\t \t $(".d").hide();  
}  
if($("#e:checkbox:checked").length == 0){  
    $(".e").hide();  
}  
if($("#A:checkbox:checked").length > 0){  
\t \t $(".A").show();  
};  
if($("#B:checkbox:checked").length > 0){  
\t \t $(".B").show();  
}  
if($("#c:checkbox:checked").length > 0){  
\t \t $(".c").show();  
}  
if($("#d:checkbox:checked").length > 0){  
\t \t $(".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>