jquery - 数据表：如何为“列可见性”按钮创建下拉列表？

Question

我目前正在做一个数据表。我想要一个下拉菜单来显示/隐藏列。

我读了文档。我在 StakOverflow 上阅读了很多主题。但是我没有找到解决方案。

我制作了按钮，但它生成的按钮与列一样多。

        dom: 'Blfrtip',
    buttons: [{
        extend: 'csv',
        text: 'Export',
        className: 'btn btn-secondary',
        charset: 'UTF-8',
        fieldSeparator: ';', // with ';' we can export the file in csv and each column is in one column. Without ';' everything is in one column
        exportOptions: {
            columns: [tablecolumnsforexport] // display only the columns defined before. In this case : we don't display the first and the last columns
        },
        bom: true
    }, {
        extend: 'colvis',
        text: 'columns visibility',
        postfixButtons: ['colvisRestore']
    }]
  

当前结果：

更具体地说，我想要这样的东西（在红色方块中）： 我已经创建了按钮打印和列可见性。你知道如何创建一个包含所有列名的下拉列表吗？

编辑：非常清楚，我不想过滤以找到一行。我想显示或隐藏一个、部分或所有整个列。

标签： jquerydatatables

Answer 1

3天后，我在Datatables论坛中找到了解决方案。

我在我的css中添加了这些行：

div.dt-buttons {
position: relative;
float: left;
font: 0.9em Arial;
padding-bottom: 0.25em;
}

div.dt-buttons .dt-button {
margin: 0.25em 0.333em 0.25em 0;
}

div.dt-button-collection {
font: 0.9em Arial;
position: absolute;
margin-top: 3px;
padding: 4px;
border: 1px solid #ccc;
background-color: #fff;
overflow: hidden;
height: 450px !important;
overflow-y: scroll !important;
z-index: 2002;
}

div.dt-button-collection .dt-button {
text-align: center;
position: relative;
display: block;
margin-right: 0;
width: 100px;
}

div.dt-button-background {
zoom: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=35);
opacity: .35;
z-index: 2001;
}

dt-button.buttons-select-cells,
dt-button.buttons-select-rows,
dt-button.buttons-select-columns {
position: relative;
width: 175px;
text-align: left;
}

dt-button.buttons-columnVisibility.ui-button-text-only {
padding-left: 10px;
}

dt-button.buttons-columnVisibility.ui-state-active,
dt-button.buttons-columnVisibility {
position: relative;
width: auto;
*width: 230px;
text-align: left;
*zoom: expression(this.runtimeStyle.zoom="1", 
this.insertBefore(document.createElement("div"), 
this.childNodes[0]).className="before", 
this.appendChild(document.createElement("div")).className="after");
}

dt-button.buttons-columnVisibility:before,
dt-button.buttons-columnVisibility.ui-state-active:after {
display: block;
position: absolute;
top: 1em;
margin-top: -8px;
margin-left: -6px;
width: 16px;
height: 16px;
box-sizing: border-box;
}

dt-button.buttons-columnVisibility:before {
content: ' ';
border: 2px solid black;
border-radius: 3px;
}

dt-button.buttons-columnVisibility.ui-state-active:after {
font: 0.9em Arial;
content: '\2714';
text-align: center;
}

*dt-button.buttons-columnVisibility .before,
*dt-button.buttons-columnVisibility.ui-state-active .after,
*dt-button.buttons-columnVisibility.ui-state-active:hover .after {
position: absolute;
margin: 6px 0px 0px -6px;
width: 16px;
height: 16px;
background-position: 0px 0px;
}

*dt-button.buttons-columnVisibility .before {
background-position: 0px 0px;
}

*dt-button.buttons-columnVisibility.ui-state-active .before {
background-position: 0px 16px;
}

*.dt-button.buttons-columnVisibility.ui-state-active:hover .before {
background-position: 16px 0px;
}

结果 ：

希望这可以帮助某人。