How to display datatable button separate from button group?

Question

I have a row of buttons at the bottom of a DataTable like this below. But now I want to add a separate button colVis to the top of the table.

Following this example I've tried the following specifying the new button to be placed at dom: 'Bfrtip' but I get the error - Uncaught TypeError: Cannot read property 'tag' of undefined at new m (dataTables.buttons.min.js:6)

Question:

How can you display datatable button separate from button group?

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

I also tried the following creating a new button for colVis and appending to a div with id colFilter at the top of the table to no avail:

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

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

And in a third attempt tried this approach explained 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');

Example like this:

this is a more robust solution: https://stackoverflow.com/a/34577139/3393929 — user3393929, Nov 08 '19 at 18:57

score 2 · Accepted Answer · answered Jan 26 '17 at 16:54

2

This worked for me. It puts one button at the bottom and one at the top. I have tested the button functionality with no issues but did not test accessing the button container object via DataTable so there may be side effects.

you can see it work at 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);
});

answered Jan 26 '17 at 16:54

Bindrid

3,655
2
17
18

I notice adding `dom: 'ftBip',` removes my dropdown to filter number of row results per page. Any idea why that is? – Brian Var Jan 26 '17 at 19:18
I think you need to add "l" for length control. Keep in mind if you put that as 'lftBip', my code would put the button before the dropdown. If you don't like that, you would need to change the code to $("#example_length").after( – Bindrid Jan 26 '17 at 19:31
also, the 'dt-buttons' class just basically adds a float left. In my code where I am doing something similar, I just added style='float:right: instead of using the class. – Bindrid Jan 26 '17 at 19:39

score 0 · Answer 2 · answered Oct 24 '20 at 05:54

0

Some simple Idea is, to remove class "btn-group" after render with jquery. To be save, this has to be done on hook of the render event of DT.

answered Oct 24 '20 at 05:54

mkours

390
2
11

How to display datatable button separate from button group?

2 Answers2