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

Question

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

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

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

Answer 1

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

首先，这里是如何向列添加选择菜单：

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

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

您可以通过执行以下操作来显示/隐藏列（来自DOCs）：

$('.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());
});

就默认列而言，它取决于您如何呈现表中的数据，但您应该能够通过简单地执行以下操作来完成此操作（直接来自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> 值中指定的最后一列。