Question

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

这样的例子：

Answer 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);
});

Answer 2

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

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

2 个答案: