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

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

NkNoctaflyNkNoctafly Posts: 7Questions: 4Answers: 0
edited August 19 in Select

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 13,786Questions: 25Answers: 3,242

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

    Kevin

  • NkNoctaflyNkNoctafly Posts: 7Questions: 4Answers: 0

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

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

  • kthorngrenkthorngren Posts: 13,786Questions: 25Answers: 3,242

    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

  • NkNoctaflyNkNoctafly Posts: 7Questions: 4Answers: 0
    edited August 18
  • colincolin Posts: 12,608Questions: 0Answers: 2,154
    Answer ✓

    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

Sign In or Register to comment.