How can I update the select 2 filter outside the data table?

NkNoctafly

Description of problem: Hello ,I'm trying to update the filters depending on the selection, but I still can't do it,Filters already work but are not updated depending on the selection

initComplete: function () {
            this.api().columns([1, 2, 3, 4, 5, 6]).every(function () {
                var Destino = '#prueba'
                var column = this;
                var select = $('<select class="Filtros select2 col-md-1" style="width:15%"><option value="">Seleccionar Todas</option></select>&nbsp; &nbsp; &nbsp; <script>$(".Filtros").select2({allowClear: true,theme: "classic",dropddownAutoWidth: false,placeholder: "Selecciona"});</script>')
                    .appendTo(Destino)
                    .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>');
                });
            });
            tablaGeneral.on('draw', function () {
                tablaGeneral.columns([1, 2, 3, 4, 5, 6]).indexes().each(function (idx) {
                    var Destino = $("#prueba");
                    var column = this;
              
             
                   var select = $(tablaGeneral.column(idx)).find('select');

                    if (select.val() === '') {
                        select
                            .empty()
                            .append('<option value=""/>');

                        tablaGeneral.column(idx, {
                            search: 'applied'
                        }).data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>');
                        });
                    }
                });
            });

        },

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

kthorngren

I think this thread is asking the same question. See if it helps.

Kevin

NkNoctafly

The problem is that I don't need this inside datatable

it only recognizes the header and footer but not another place for filtering

kthorngren

The idea is that the createDropdowns() function is run each time the search takes place so it can update the dropdown lists. It doesn't matter where they are located on the page. Just change the selectors used to those you are currently using. If you need help with this please build a test case with what you have so we can provide more specific help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

NkNoctafly

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

This is the test cso

colin

There were several errors in the script - for example only 6 columns, not 7, and a few others. The problem is that you're trying to get the value of the select that's on the column, but it's not in the column, it on the prueba element - so you need to get the select element from there. I've marked that in the code here, hopefully that'll get you going,

Colin

chamie

Do you have an example using select2 multiselect component?

colin

Is this with Editor? Or filtering? There are a few threads on each, such as here and here,

Colin