How to use dDom and Buttons at the same time

u20241229

Hi,

This example includes copy and column visibility options:

https://live.datatables.net/guvuzopo/1/edit

I have included some buttons via this code:

$(document).ready(function () {
    var table = $('#example').DataTable({
        order: [],
        bLengthChange: false,
        responsive: true,
        colReorder: true,
        pageLength: 365,
        // sDom: '<"top"lfip>rt<"bottom"ip<"clear">',
        mark: true,
        layout: {
            topStart: {
                buttons: ['copy', 'csv', 'excel','colvis']
            }
        }
    });

});

However - as per this 2nd example - I'd like to use sDom to change the layout as follows:

https://live.datatables.net/bovedoxo/1/edit

Using this code:

$(document).ready(function () {
    var table = $('#example').DataTable({
        order: [],
        bLengthChange: false,
        responsive: true,
        colReorder: true,
        pageLength: 365,
        sDom: '<"top"lfip>rt<"bottom"ip<"clear">',
        mark: true,
        layout: {
            topStart: {
                buttons: ['copy', 'csv', 'excel','colvis']
            }
        }
    });

});

However - using sDom then removes the buttons.

I can't work out what I need to include in the sDom line to ensure that the buttons also appear?

Thanks

u20241229

Sorry, I found out how to do it by using layout and the grid:

https://live.datatables.net/cehunufu/1/edit

    // Remove the defaults
    DataTable.defaults.layout = {
        topStart: null,
        topEnd: null,
        bottomStart: null,
        bottomEnd: null
    };

    $(document).ready(function () {

        // DataTable
        var table = $('#example').DataTable({
            order: [],
            pageLength: 365,
            // sDom: '<"top"lfipb>rt<"bottom"ip<"clear">',
            mark: true,
            layout: {
                top0Start: 'info',
                top0End: 'paging',
                top1Start: 'buttons',
                top1End: 'search',
                bottomStart: 'buttons',
                bottomEnd: 'paging'
            },
            buttons: ['copy', 'csv', 'excel']
        });


    });

allan

Yup - use layout for any new code. dom is still supported, but is really isn't fun to use. layout is a lot easier to use

Allan