Bootstrap Styling - Move lenghtchange position

J6_

Is there a way to move the position of the buttons? I'd like to have these above the search text box if possible (Please see the attatched image for how it currently is).

This is the code being currently being used. Any help would be greatly appriciated.

          $(document).ready(function() {
                var table = $('#example').DataTable( {
                    responsive: true,
                    lengthChange: true,
                    buttons: [ 'print', 'copy', 'csv', 'pdf', 'excel', 'colvis' ]
                } );

                table.buttons().container()
                    .appendTo( '#example_wrapper .col-sm-6:eq(0)' );
            } );

allan

.prependTo( '#example_wrapper .col-sm-6:eq(1)' );

should do it. You will probably need to change the div.dt-buttons CSS to float: right as well.

Allan

J6_

Hi allan,

Thank you for your help. This somewhat worked, but the buttons are in-line with lenghtChange (Please see attached screenshot). Is there a way to have the lenghtChange in-line with the search text box?

I'v tried to use this simalar code but had no luck. Do you have any suggestions?
https://datatables.net/release-datatables/extensions/TableTools/examples/bootstrap.html

Thank you once again.

allan

I'd really need a link to your page or some other test case so I can inspect the CSS and modify it.

Allan