Open

DataTables filters column when clicking on select inside Header

I have a Data Tables instance that appends a pick inside the header of a desk.

Here is the relevant part of the code that adds the select to the header

initComplete: function () {

            count = 0;

            this.api().columns().every(function () {

                var title = this.header();

                //replace spaces with dashes

                title = $(title).html().replace(/[\W]/g, '-');

                var column = this;

                var select = $('<br><select id="' + title + '" class="select2" ></select>')

                    .appendTo($(column.header()))

                    .on('change', function () {

                        //Get the "text" property from each selected data

                        //regex escape the value and store in array

                        var data = $.map($(this).select2('data'), function (value, key) {

                            return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;

                        });

                        //if no data selected use ""

                        if (data.length === 0) {

                            data = [""];

                        }

                        //join array into string with regex or (|)

                        var val = data.join('|');

                        //search for the option(s) selected

                        column

                            .search(val ? val : '', true, false)

                            .draw();

                    });

                //unique, tipo group by 

                //sorte deixa em ordem abcd

                column.data().unique().sort().each(function (d, j) {

                    select.append('<option value="' + d + '">' + d + '</option>');

                });

                //use column title as selector and placeholder

                $('#' + title).select2({

                    multiple: true,

                    closeOnSelect: false,

                    placeholder: "Select a " + title

                });

                //initially clear select otherwise first option is selected

                $('.select2').val(null).trigger('change');

            });

}

However, I observed that one disadvantage of setting it inside the header is that after I click into the choose, data tables think I am sorting through that column. Is there a manner to now not type the column if I am clicking within the pick (which has an identity equal to the column call)