Jquery 如何将datatable按钮与按钮组分开显示？

我有一排按钮在底部的一个像下面这样的。但是现在我想在表的顶部添加一个单独的按钮

colVis

接下来，我尝试了以下操作，指定要放置在

dom中的新按钮：“Bfrtip”

，但我得到了错误-

uncaughttypeerror:无法读取新m（dataTables.buttons.min.js:6）中未定义的属性“tag”

问题：

如何将datatable按钮与按钮组分开显示

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');

在第三次尝试中，这种方法解释道：

例如：

---

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

你可以看到它在工作

$（“示例”）.one（“preInit.dt”，函数（evtObj，设置）{
var$newbtncainer=$（“”）；
$（“示例包装器”）.prepend（$newbtncainer）；
$（“a.buttons-colvis”）。附录（$NewbtnCainer）；
});

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

我注意到添加了

dom:'ftBip'，

删除了我的下拉列表以过滤每页的行结果数。知道为什么吗？我想你需要加上“l”来控制长度。请记住，如果您将其作为'lftBip'，我的代码会将按钮放在下拉列表之前。如果您不喜欢，则需要将代码更改为$（“#example_length”）。after（另外，'dt buttons'类基本上只添加了一个左浮点。在我正在执行类似操作的代码中，我只添加了style='float:right:而不是使用该类。这是一个更健壮的解决方案：

    //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');

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

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