Datatable toolbar filter

lauromneto

Good afternoon.
I have a basic datatable, with the filter of number of records per page aligned to the left and the input search aligned to the right.
How do I create a select option between these 2 filters, so that they are aligned and with their respective spacing?
My code:

        $("#datatable").DataTable({
            "dom": '<"wrapper"Bf<"toolbar">>rti',
            language: {
                paginate: {
                    previous: "<i class='fas fa-backward'>",
                    next: "<i class='fas fa-forward'>"
                }
            },
            drawCallback: function() {
                $(".dataTables_paginate > .pagination").addClass("pagination-rounded");
                $('[data-toggle="tooltip"]').tooltip();
            },
            initComplete: function () {
                this.api().columns([1]).every( function () {  // columns[0] sets the filter dropdown to only the rider type
                    var column = this;
                    var select = $('<select id="col3" class="form-control input-sm"><option value="">Todas Categorias</option></select>').appendTo( ".toolbar" )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex($(this).val()); 
                        column.search( val ? '^'+val+'$' : '', true, false ).draw();
                    } );
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            },
            responsive: false,
            bAutoWidth: false,
            bInfo: false,
        });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Please provide a test case showing what you are trying to do so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

lauromneto

http://live.datatables.net/wegixeri/1/edit

I'm putting the same code I'm using in your link there and it just doesn't show the same thing....
What I'm doing is... At the top of the datatable, I want to have the filter for the number of records per page, the select option and the search, and at the bottom of the datatable, just the pagination

kthorngren

Your drawCallback has this error:

Uncaught TypeError: $(...).tooltip is not a function

I commented out the drawCallback code.

The t option of the dom option needs to be used.
http://live.datatables.net/togafuse/1/edit

Kevin

lauromneto

Kevin....okay....but that's not the problem....see the image....the problem is that all the filters are out of position when I put the select option

kthorngren

Your screenshot is showing that you are Bootstrap styling but you are using the dom option as default styling. The dom option shows basic examples of how to configure for different style frameworks. Please try the Bootstrap form and if you still need help then please update the test case with all the correct bootstrap JS and CSS files and your new dom option.

Kevin

lauromneto

Sorry Kevin, I don't understand.... How do I use the bootstrap form tags, but with the datatable functionality? I did not understand....

tangerine

Examples of Bootstrap dom are here:
https://datatables.net/reference/option/dom

kthorngren

Start with this BS4 code as shown in the styling section of the dom:

dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

See how it looks then add your toolbar and adjust the columns and div dividers as you need for your solution.

Kevin

lauromneto

You're the guy.... I honestly wouldn't be able to ride this way....
Thank you very, very much.... God bless you and also Tangerine who sent a link to see.