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: stackoverflow.com/a/34577139/3393929 — user3393929
– user3393929, Commented Nov 8, 2019 at 18:57

Bindrid · Accepted Answer · 2017-01-26 16:54:04Z

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, 2017 at 16:54

Bindrid

3,7552 gold badges21 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brian Var Over a year ago

I notice adding dom: 'ftBip', removes my dropdown to filter number of row results per page. Any idea why that is?

Bindrid Over a year ago

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 Over a year ago

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.

mkours · Accepted Answer · 2020-10-24 05:54:49Z

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, 2020 at 5:54

mkours

6101 gold badge5 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to display datatable button separate from button group?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related