如何显示与按钮组分开的数据表按钮？答案

【问题标题】：How to display datatable button separate from button group?如何显示与按钮组分开的数据表按钮？
【发布时间】：2017-01-26 11:49:37
【问题描述】：

我在DataTable 的底部有一排按钮，如下所示。但现在我想在表格顶部添加一个单独的按钮colVis。

在this example 之后，我尝试了以下方法，指定要放置在dom: 'Bfrtip' 的新按钮，但我收到错误 - Uncaught TypeError: Cannot read property 'tag' of undefined at new m (dataTables.buttons.min.js:6)

问题：

如何将数据表按钮与按钮组分开显示？

var historyTable = $('#escalation').DataTable({
        "order": [[10, "desc"]],
        colReorder: true,
        columnDefs: [
        {
            orderable: false,
            targets: [7, 11, 12, 13, 14]
        },
        {
            "width": "15%",
            "targets": [7, 11]
        }
        ],
        responsive: true,
        buttons: [
        {
            extend: 'pdf',
            footer: true,
            exportOptions: {
                columns: [1, 2, 5, 6, 11]
            }
        },
        {
            extend: 'print',
            footer: true,
            exportOptions: {
                columns: [1, 2, 5, 6, 11]
            }
        },
        'copy', 'csv', 'excel'
        ],
        'iDisplayLength': 55,
    });


    new $.fn.DataTable.Buttons(historyTable, {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'colvis'

            },   
        ]
    });

    historyTable.buttons(1, null).container().appendTo(
    historyTable.table().container()
);

我还尝试了以下方法，为 colVis 创建了一个新按钮，并在表格顶部附加了一个 ID 为 colFilter 的 div，但无济于事：

//Place colVis filter button at top of table
    var colvis = new $.fn.dataTable.Buttons(historyTable, {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'colvis'
            }
    ]
    });

    colvis.container().appendTo('#colFilter');

并在第三次尝试中尝试了这种方法，解释了here：

    //Place colVis filter button at top of table
    var colvis = new $.fn.dataTable.Buttons(historyTable, {
        buttons: [
            {
                extend: 'colvis',
                postfixButtons: ['colvisRestore']
            }
    ]
    });

    historyTable.buttons(3, null).container().appendTo('#colFilter');

这样的例子：

【问题讨论】：

这是一个更强大的解决方案：stackoverflow.com/a/34577139/3393929

标签： jquery button datatables

【解决方案1】：

这对我有用。它在底部放置一个按钮，在顶部放置一个按钮。我已经测试了没有问题的按钮功能，但没有测试通过 DataTable 访问按钮容器对象，因此可能会有副作用。

你可以在https://jsfiddle.net/bindrid/sc0bo122/11/看到它的工作原理

$("#example").one("preInit.dt", function (evtObj, settings){

    var $newbtncontainer = $("<div class='dt-buttons'></div>");
    $("#example_wrapper").prepend($newbtncontainer);
    $("a.buttons-colvis").appendTo($newbtncontainer);
});

【讨论】：

我注意到添加 dom: 'ftBip', 会删除我的下拉列表以过滤每页的行结果数。知道这是为什么吗？
我认为你需要添加“l”来控制长度。请记住，如果您将其设为“lftBip”，我的代码会将按钮放在下拉菜单之前。如果您不喜欢这样，则需要将代码更改为 $("#example_length").after(
另外，'dt-buttons' 类基本上只是向左添加了一个浮点数。在我做类似事情的代码中，我只是添加了 style='float:right: 而不是使用类。

【解决方案2】：

一些简单的想法是，在使用 jquery 渲染后删除类“btn-group”。要保存，必须在 DT 的渲染事件挂钩上完成。

【讨论】：