Datatable toolbar filter

Datatable toolbar filter

lauromnetolauromneto Posts: 129Questions: 0Answers: 0
edited June 2021 in General

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

Replies

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

    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

  • lauromnetolauromneto Posts: 129Questions: 0Answers: 0

    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

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

    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

  • lauromnetolauromneto Posts: 129Questions: 0Answers: 0

    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

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

    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

  • lauromnetolauromneto Posts: 129Questions: 0Answers: 0

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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

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

    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

  • lauromnetolauromneto Posts: 129Questions: 0Answers: 0

    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.

Sign In or Register to comment.