DataTables filters column when clicking on input field inside Header

Question

I have a DataTables instance that appends a select in the header of a table. Here is a codepen showing it.

Here is the relevant part of 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 = $('
')
                    .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('');
                });

                //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 noticed that one downside of putting it in the header, is that when I click into the select, DataTables thinks I am sorting by that column. Is there a way to not sort the column if I am clicking inside the select (which has ID equal to the column name)

Edit: I am looking for a solution that does not trigger the the column sort when I click on an input element inside the header column.

user_11061164 · Answer

There are two ways you can do it.

First is to disable sorting on click altogether. Just put this in your table options:

ordering: false,

The other option is to have two rows in the header. The first row should be th with your column header, the second should be your dropdown filters inside a td cell. This is because DataTables reserves a space inside th cells for the sorting arrows even when they are not there.


    
        Demanda
        Título
        Solicitante
        Data Inclusao
        Área
        SP

You would need to change your appendTo() to something like this:

.appendTo($(`#example thead tr:eq(1) td`).eq(this.index()))

Then in your table options you can set

orderCellsTop: true,

this will allow sorting when you click the top header row and filtering from the dropdowns in the second header row.

user_8749662 · Answer

Simplest solution I made for same problem is:

document.addEventListener("click", e => {
    var target = e.target;
    if ($(target).closest("th").hasClass("sorting") && $(target).prop("tagName") == "INPUT") {
        /* You can replace or add more element types in condition. */
        e.stopPropagation();
        e.preventDefault();
    }
}, true);

DataTables filters column when clicking on input field inside Header

2 Answers