buttons on bootstrap4 does not show on grid

sanchezfabio08

console error: 'table.buttons () is not function'

$(document).ready(function() {

        var table = $('#table_id').dataTable( {
            scrollY:        "645px",
            scrollX:        true,
            scrollCollapse: true,
            paging:         false,

                    fixedColumns:   {
                         heightMatch: 'auto'
                 },

            language: {
                    "url": "plugins/datatables/plugins/Portuguese-Brasil.json"
                },

                    lengthChange: false,
                    buttons: [ 'copy', 'excel', 'pdf', 'colvis' ],


                                              initComplete: function () {
                                 table.buttons().container()
                                   .appendTo( $('#table_id_wrapper .col-md-6:eq(0)', table.table().container() ) );


                                                }
        } );


    } );

kthorngren

table.buttons () is not function

Take a look at this FAQ:
https://datatables.net/faqs/index#api

looks like you need to change var table = $('#table_id').dataTable( { to var table = $('#table_id').DataTable( {. Note the upper case D in DataTable.

I'm not sure the table variable is instantiated (ready to use) in the initComplete function. If it doesn't work then you can use this.api() instead. For example this.api().buttons().container().

Kevin

sanchezfabio08

very good, thank you very much, had not noticed the 'D'.
The error is gone, but the buttons do not appear.

Could it be, the parameter #table_id_wrapper?

how should this parameter be defined?

Is it necessary to put '_wrapper'?

.appendTo ($ ('# table_id_wrapper .col-md-6: eq (0)', table.table (). container ()));

kthorngren

It looks like you are combining the example here:
https://datatables.net/extensions/buttons/#Direct-insertion

And the example here:
https://datatables.net/extensions/buttons/examples/styling/bootstrap.html

One issue is you have extra spaces in '# table_id_wrapper .col-md-6: eq (0)' which should give console errors. You will want this format: '#table_id_wrapper .col-md-6:eq(0)'.

Next you will either want to use .appendTo( $('#table_id_wrapper .col-md-6:eq(0)' ) ); or .appendTo( $('.col-md-6:eq(0)', this.api().table().container()));. The second is a more generic selector which could work for any table.

You can see this here by commenting commenting out two of the options to see their affect:
http://live.datatables.net/zitogune/1/edit

Kevin

sanchezfabio08

Thank you very much, Kevin!!!