Datatables multi-button group add another button group

Question

I have a datatables in my page where I have included multiple export buttons and custom buttons. What I wanted to do was to put all the custom buttons below the export buttons. I came across this guide from datatables but the buttons shows below my table. I tried modifying the location via browser inspect but still not successful. What I wanted to happen was like this:

[CSV] [EXCEL] [PDF]
[CUSTOM BTN 1] [CUSTOM BTN 2] [CUSTOM BTN 3]

But this is what happens

or

This is my code

$(document).ready(function() {
        var table = $('#enrolled').DataTable( {
            dom: "<'row'<'col-sm-12'Q>>" +
                 "<'row'<'col-sm-6'l><'col-sm-6'f><'col-sm-12'B>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            select: true,
            order: [],
            buttons: [
                    {
                    text: 'CSV',
                    className: 'btn btn-info'}, 
                    {   extend: 'excel',
                    text: 'Excel',
                    className: 'btn btn-success'}, 
                    {   extend: 'pdf',
                    text: 'PDF',
                    className: 'btn btn-danger'}, 
        } );

        new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            text: 'Button 2',
            action: function ( e, dt, node, conf ) {
                alert( 'Button 2 clicked on' );
            }
        },
        {
            text: 'Button 3',
            action: function ( e, dt, node, conf ) {
                alert( 'Button 3 clicked on' );
            }
        }
    ]
} );

table.buttons( 1, null ).container().appendTo(
    $('div.dt-buttons')
);

} );

My concern is that since the code is .appendTo, it only adds to the original class. Is there a way like it will be connected via new line? I am still trying to search for some initialization codes. Thanks.

score 0 · Answer 1 · answered May 09 '23 at 06:19

Okay. I was able to fix it. In the dom, I just added another row and added a class name. Now in my table.buttons, I just append to this class and now it works. This is what the code looks like.

DOM

$(document).ready(function() {
  var table = $('#enrolled').DataTable( {
    dom: "<'row'<'col-sm-12'Q>>" +
          "<'row'<'col-sm-6'l><'col-sm-6'f><'col-sm-12'B>>" +
           "<'row'<'col-sm-12 mt-2 custBut'>>"+      <----------- Note the custBut
            "<'row'<'col-sm-12'tr>>" +
             "<'row'<'col-sm-5'i><'col-sm-7'p>>",

Table Buttons under new $.fn.dataTable.Buttons

     table.buttons( 1, null ).container().appendTo(
        $('div.custBut')

Datatables multi-button group add another button group

1 Answers1