Add custom input select into datatables net vue3 between 'show x entries' and 'search'

DevCy

Hi, i would add a custom filter between 'show x entries' and 'search' filters. I work actually with datatables.net vue3.

kthorngren

See this example of how to add custom components to the Datatables elements.

Kevin

DevCy

Thank you, when i try this it's ok but i will have a data into a select dropdown. When i add that example, i don't have the 'show x entries' pagelength.

kthorngren

You need to add the l to the dom option. Take a look at the dom docs for details.

Kevin

DevCy

oh super thank you Kevin. I search now how to have my column data into my filter dropdown.

kthorngren

You should be able to adapt this example. Change the jQuery selector in line 9 to match the select dropdown you are adding. And in line 6 specify which column or columns you want to build the select options for. Something like .columns( [1] ) for the second column. See the column-selector docs for all the options.

Kevin

DevCy

Thank you i will check this. I've an error near escapeRegex.
I think i will create a custom dropdown but not inside my thead . Near search bar.
But for moment i try some things and it don't works.

kthorngren

I think i will create a custom dropdown but not inside my thead

Yes, that is why I suggested changing the selector in line 9.

But for moment i try some things and it don't works.

Please build a simple test case of 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

DevCy

Hi, i've worked with that

initComplete: function () {
            this.api()
                .columns()
                .every(function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());
 
                            column.search(val).draw();
                        });
 
                    column
                        .data()
                        .unique()
                        .sort()
                        .each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                });
        },

and it's works fine. Thank you Kevin. I edited juist column.search and it's works fine. Juist on my query i added 'select('column') from table take(10) ---> because i've 132000 rows ... And now when i will use the dropdown i've juist inside the 10 not all.
Do you have an idea ??

kthorngren

It sounds like you have server side processing enabled, ie serverSide: true. Only the rows on the page (10 by default) or at the client so the above code only has access to those rows.

One option is to check the draw parameter in your server script. The draw value will be 1 when the table first initializes. In the server script you can query for the column select values and return as an extra object. Use the second parameter, json, passed into initComplete to access the select list data.

Kevin

DevCy

i don't understand. I must change code for that

.then((response) => {
                this.companies = response.data.data;
                $('#company-table').DataTable(
                    {
                        dom: '<"toolbar">flrtip',
                        initComplete: function(){
                            this.api()
                                .columns([1])
                                .every(function () {
                                    var column = this;
                                    var select = $('<select id="offices" "><option selected>-- Choose an office --</option></select>')
                                    .appendTo($('div.toolbar'))
                                    .on('change', function () {
                                        var val = $.fn.dataTable.util.escapeRegex($(this).val());
                                        column.search(val).draw();
                                    });
                    
                                    column
                                        .data()
                                        .unique()
                                        .sort()
                                        .each(function (d, j) {
                                            select.append('<option value="' + d + '">' + d + '</option>');
                                        });
                                });
                            
                            },
                        paging: true,
                        aaSorting: [],
                        serverSide: true,
                        processing : false,

i must thus change code for column.search(val).draw() ????

allan

No - what Kevin is saying is a modification to your server-side processing script. Not the client-side code.

You could return the list of options only when draw=1.

Allan