How to align the buttons with the search field?

LucasBL

How to align the buttons with the search field, and the same thing between the pagination and its description.?

I'm also catching some errors in JQuery and if I remove the code snippet below, the error goes away!
table.buttons().container()
.appendTo('#example_wrapper .col-md-6:eq(0)');

<script>
    $(document).ready(function () {
        $('#example').DataTable({
            "language": {
                buttons: {
                    pageLength: {
                        '_': "Mostrar %d Linhas",
                    }
                },
                "zeroRecords": "Nada encontrado - desculpe",
                "info": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "infoEmpty": "Nenhum registro disponível",
                "infoFiltered": "(filtrado de _MAX_ registros totais)",
                "decimal": ",",
                "thousands": ".",
                "sSearch": "Consultar",
                "oPaginate": {
                    "sNext": "Próximo",
                    "sPrevious": "Anterior",
                    "sFirst": "Primeiro",
                    "sLast": "Último"
                },
            },
            dom: 'Bfrtip',
            lengthMenu: [
                [10, 25, 50, -1],
                ['10 Linhas', '25 Linhas', '50 Linhas', 'Mostrar todas']
            ],
            buttons: [
                'pageLength',
                {
                    extend: 'excel',
                    text: '<i class="bi bi-file-excel" aria-hidden="true"> Excel</i>'
                }
            ],
        });
        table.buttons().container()
            .appendTo('#example_wrapper .col-md-6:eq(0)');
    });
</script>

kthorngren

Table is not defined

The table variable is expected to be an instance of the Datatables API. On line 3 you would use something like this var table = $('#example').DataTable({.

You are using dom: 'Bfrtip', which, using the B, places the buttons. Using that and

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

are both placing the buttons. See the docs here:
https://datatables.net/extensions/buttons/#Displaying-the-buttons

I copied your above code here:
http://live.datatables.net/mewopapo/1/edit

Looks like you are using Bootstrap. I assumed you are using BS4 and made a change to your dom option. Take a look at the examples in the docs to see how to use the option for different style frameworks. I copied the BS4 example and changed the first element from l to B.

Or you can use the direct insertion method and provide the appropriate selector for where you want to place the buttons.

Kevin

LucasBL

Hi kthorngren,

Jquery's case worked out, thank you! had not noticed this error.

About the second case, I'm using Bootstrap 5.

LucasBL

I added the code here:

http://live.datatables.net/mewopapo/3/edit

LucasBL

Hi, Sorry, now I see that you've already sent the solution, thanks for the support, it worked!