(Bootstrap) buttons() is empty when server-side processing is used

(Bootstrap) buttons() is empty when server-side processing is used

frigglefriggle Posts: 11Questions: 1Answers: 0

I'm trying to insert Buttons in a Bootstrap-styled DataTable with server-side processing, but getting mixed results.

I'm following the example in the documentation, but it is not working the same way for me: Bootstrap styling

    var table = $('#tblActivity').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '/my/url',
            type: 'post'
        },
        columns: [
            //data settings here
        ],
        //dom: 'Bfrtip',
        buttons: [ 'colvis' ]
    });

    var btns = table.buttons();
    var btncontainer = table.buttons().container();
    btncontainer.appendTo('#tblActivity_wrapper .col-sm-6:eq(0)');

table.buttons() has a length of zero when ran as written above.

I can get it to work in either of two ways:
-dom option is uncommented
-processing/serverSide/ajax options are commented out

Neither solution is satisfactory, of course. Adding the dom option conflicts with the bootstrap styling, and dropping the server-side processing is not an option.

My column settings are not included above for readability sake, but they are simple data ones, like { data: 'Account' }.

This question has an accepted answers - jump to answer

Answers

  • frigglefriggle Posts: 11Questions: 1Answers: 0

    I was able to successfully work around this using the alternative method for creating buttons. table.buttons() now has a non-zero length, and I can work with the container.

        var table = $('#tblActivity').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '/my/url',
                type: 'post'
            },
            columns: [
                //data settings here
            ]
        });
    
        new $.fn.dataTable.Buttons(table, {
            buttons: [ 'colvis' ]
        });     
    
        var btns = table.buttons();
        var btncontainer = table.buttons().container();
        btncontainer.appendTo('#tblActivity_wrapper .col-sm-6:eq(0)');
    

    I'm glad that I can proceed with my work, but still, I'd prefer to use the original syntax if possible.

  • allanallan Posts: 62,084Questions: 1Answers: 10,179 Site admin
    Answer ✓

    So the issue with the first instance above is that Buttons isn't initialised until the table has been loaded with data. Since you are Ajax loading the data, that means it is async and the data isn't present when you execute the following API methods.

    Use initComplete to wait for the table to be full constructed first.

    Allan

  • frigglefriggle Posts: 11Questions: 1Answers: 0
    edited February 2016

    Oh, I see. That works.

    Moving table.buttons().container().appendTo('#tblActivity_wrapper .col-sm-6:eq(0)'); into initComplete does the trick when initializing the buttons the usual way.

    Thank you!

This discussion has been closed.