如何在javascript中通过列ID更改列可见性

How to change column visibility by Column ID in javascript?

本文关键字：ID 可见性 javascript      更新时间：2023-09-26

我想使列在选中复选框时可见。我有这个函数:

function SaveTableSettings() {
    var notChecked = [], checked = [];
    var table = $('#data-table');
    $(":checkbox").each(function() {
        if(this.checked){
            checked.push(this.id);
        } else {
            notChecked.push(this.id);
        }
});

我想使用"checked"数组的元素，并通过这个函数改变相应列的可见性:

if (dataTableId == "data-table"&&toShow.length<1) {
    alert("in if");
    table.column(1).visible(false);
    table.column(2).visible(false);
    table.column(3).visible(false);
    table.column(4).visible(false);
} else {
    for (i = 0; i < toShow.length; i++) {
    }
}

其中"toShow"是与"checked"相同的数组，我将其作为参数传递给它。我想让数组中的列可见，但我不知道在for循环中该怎么做。感谢您的帮助

您可以使用Buttons扩展来实现这个目的，更准确地说，您应该使用Buttons的列可见性插件。

下面是基本用法示例:

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'colvis'
        ]
    } );
} );

必须包含相关的JavaScript文件，例如:

  • https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
  • https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js
  • https://cdn.datatables.net/buttons/1.0.3/js/buttons.colVis.min.js

或者，使用下载生成器并包含带有按钮和列可见性模块的数据表。

p。如果你使用旧的数据表(1.9)。你应该使用ColVis扩展名

没有标记/HTML就很难调试代码，但对我来说，这似乎是在试图用大锤敲开坚果。

代替id的(?)，只需使用一个属性将复选框绑定到某个列:

<input type="checkbox" data-column="0" checked/>

在你的SaveTableSettings()或其他地方:

$("[data-column]").each(function() {
    table.column($(this).data('column')).visible($(this).is(':checked'));
})

一个小演示-> http://jsfiddle.net/c0o48jmv/1/

以上可以很容易地更改为针对id而不是列索引。只需将id 's添加到<th> 's

<th id="col0">columnHeader</th>

和参考那些id的索引，而不是索引

<input type="checkbox" data-column="#col0" checked/>

http://jsfiddle.net/d9q06cg0/

相关文章：