How to align the buttons with the search field?

How to align the buttons with the search field?

LucasBLLucasBL Posts: 6Questions: 1Answers: 0

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>

Replies

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • LucasBLLucasBL Posts: 6Questions: 1Answers: 0

    Hi kthorngren,

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

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

  • LucasBLLucasBL Posts: 6Questions: 1Answers: 0
    edited June 2021
  • LucasBLLucasBL Posts: 6Questions: 1Answers: 0

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

Sign In or Register to comment.