使用下拉菜单显示和隐藏 table 中的列

Question

我有一个 table，看起来和这个一模一样：https://www.datatables.net/examples/api/show_hide.html

我现在想用下拉菜单替换 headers（th things）。由于这些下拉菜单，我想隐藏和显示列（他们可以单击并显示他们想要的内容）。

我也想知道是否可以默认保留一些列。这一切都可能吗？

Answer 1

这绝对是可能的，但是你开始开发什么了吗？您有任何代码供我们使用吗？如果没有，我可以为您指出几个很好的资源来帮助您入门。

首先，这里是如何将 select 菜单添加到列：

<th>Date
    <select id="filter_dt" class="headerFilter">
        <option value="show">Show</option>
        <option value="hide">Hide</option>
    </select>
</th>

以上代码将为列提供下拉菜单。

您可以通过执行以下操作（来自 DOCs）获得 show/hide 列：

$('.headerFilter').on('click', function(e) {
    e.preventDefault();

    // Get the column API object
    var column = table.column($(this).attr('data-column'));

    // Toggle the visibility
    column.visible(! column.visible());
});

就默认列而言，它取决于您在 table 中呈现数据的方式，但您应该能够通过简单地执行以下操作（直接从 DOCs):

$('#example').DataTable( {
    ajax: "../php/staff.php",
    columns: [
        { data: "first_name" },
        { data: "last_name" },
        { data: "position" },
        { data: "office" },
        { data: "start_date" },
        { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
        {
            data: null,
            defaultContent: '<a href="#" class="remove">Delete</a>',
            orderable: false
        },
    ]
});

<a href="#" class="remove">Delete</a> 值中指定的最后一列。

使用下拉菜单显示和隐藏 table 中的列

Show and hide column in a table using drop down

html

javascript

jquery

drop-down-menu