Question

我有一张桌子，看起来很像这个：https://www.datatables.net/examples/api/show_hide.html

我现在想用下拉列表替换标题（ the 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>值中指定的最后一列。

使用下拉列表在表中显示和隐藏列

1 个答案: