Buttons Extension alignment question

cmullen77

Hello all,

I'm using the Buttons extension, and loving it.
I've extended the buttons, modifying the exportOptions, the headers, etc.. but, I'm unable to figure out how to change the buttons alignment. I can move where they are placed (the order) by changing the DOM, but the buttons are always aligned left.
My dom statement is :

dom: 'B<"clear">lfrtip',

Any help would be appreciated.

Thanks!

jLinux

You can use the className option to assign classes to them, and use the buttons().container() to put them into a container. Thats what I did with mine..

Heres the exact code for my DT Buttons

function manage_buttons( dt ) {
    dt = DT.get_api( dt );

    // Name of the filename when exported (except for extension)
    var export_filename = 'Assets-' + tools.date( '%d-%M-%Y' );

    // Configure Export Buttons
    new $.fn.dataTable.Buttons( dt, {
        buttons: [
            {
                text: '<i class="fa fa-lg fa-clipboard"></i>',
                extend: 'copy',
                className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-copy ttip'
            }, {
                text: '<i class="fa fa-lg fa-file-text-o"></i>',
                extend: 'csv',
                className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-csv ttip',
                title: export_filename,
                extension: '.csv'
            }, {
                text: '<i class="fa fa-lg fa-file-excel-o"></i>',
                extend: 'excel',
                className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-xls ttip',
                title: export_filename,
                extension: '.xls'
            }, {
                text: '<i class="fa fa-lg fa-file-pdf-o"></i>',
                extend: 'pdf',
                className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-pdf ttip',
                title: export_filename,
                extension: '.pdf'
            }
        ]
    } );

    // Add the Export buttons to the toolbox
    dt.buttons( 0, null ).container().appendTo( '#export-assets' );


    // Configure Print Button
    new $.fn.dataTable.Buttons( dt, {
        buttons: [
            {
                text: '<i class="fa fa-lg fa-print"></i> Print Assets',
                extend: 'print',
                className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn export-print'
            }
        ]
    } );

    // Add the Print button to the toolbox
    dt.buttons( 1, null ).container().appendTo( '#print-assets' );


    // Select Buttons
    new $.fn.dataTable.Buttons( dt, {
        buttons: [
            {
                extend: 'selectAll',
                className: 'btn btn-xs btn-primary p-5 m-0 width-70 assets-select-btn'
            }, {
                extend: 'selectNone',
                className: 'btn btn-xs btn-primary p-5 m-0 width-70 assets-select-btn'
            }
        ]
    } );

    // Add the Select buttons to the toolbox
    dt.buttons( 2, null ).container().appendTo( '#select-assets' );


    // Configure Selected Assets Buttons (delete, timeline, etc)
    new $.fn.dataTable.Buttons( dt, {
        buttons: [
            {
                text: 'Delete Selected',
                action: function () {
                    assets.delete_from_list(dt, assets.selected_ids( dt ) );
                },
                className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn toolbox-delete-selected'
            }, {
                text: 'View Timeline',
                action: function () {
                    console.log(assets.selected_ids( dt ));
                },
                className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn'
            }
        ]
    } );

    // Add the selected assets buttons to the toolbox
    dt.buttons( 3, null ).container().appendTo( '#selected-assets-btn-group' );


    // Configure Select Columns
    new $.fn.dataTable.Buttons( dt, {
        buttons: [
            {
                extend: 'collection',
                text: 'Select Columns',
                buttons: [ {
                    extend: 'columnsToggle',
                    columns: ':not([data-visible="false"])'
                } ],
                className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn'
            }
        ],
        fade: true
    } );

    // Add the select columns button to the toolbox
    dt.buttons( 4, null ).container().appendTo( '#toolbox-column-visibility' );
}

Heres the screenshot of the result, those are all DT buttons, but they're totally customized

jLinux

You should also be able to just inspect the buttons in the DOM and create custom CSS for whatever classes they may have