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

friggle

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' }.

friggle

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.

allan

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

friggle

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!