how do i disable sorting when user clicks on Select object (when select object is in header)

edwinkoh

Hi,
i added my filters below the header title usig
.appendTo( $(column.header()) )
the select does gets appended to the header. however, when i click on the select to filter the column, the SORT is triggered. even when i click on my selection, the SORT is activated a second time.

how do i separate the selection and sort functionality while keeping the select in the header cell.

Link to test case: https://jsfiddle.net/koh_edwin/m3510ybv/2/
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: clicking the select sorts the table

colin

Ideally you'd want to add a second header row - please see this example from this thread.

If you want a single row, this example from this thread is demonstrating how to do that,

Colin

edwinkoh

that was quick Colin, thanks for the swift response. let me try the 2nd sample. the first does not work for me as we didnt want the extra row.
best,
edwin

edwinkoh

Hi Colin,
thanks for the code, its different than what i normally see in the samples and gives me a lot to explore.
the requirements i have includes the use of a select box beneath the header. i modified your code to add SELECTs instead of inputs and right away i noticed that yor original INPUT element does not trigger a sort. however, when i replaced it with a select - sorting is still triggered - im back to where i started.
i thought that the stop propagation would help but i added that into my select trigger but it didnt help.
is there some limitation im hitting? or a setting im missing?

thanks,
edwin

heres the new version where i just started building the select (havent gotten to populating the contents of the select but my issue persists - unwanted sorting). sorting is triggered when i click one of the SELECT options.

https://jsfiddle.net/koh_edwin/5cs1oku0/3/

colin

You can do something like this - it's mixing my previous example with this one.

Hope that does the trick,

Colin

honusbam

This thread was helpful to me in solving my use case. I wanted to include my code here in case it helps someone else in the future.

In my case, I wanted to add the textboxes in the second row. I am using the API(), so some of the provided examples didn't exactly solve this for me. This code also shows how I disabled sorting on the second row AND how I handled when sorting does happen on the DT.

       dt.api()
            .columns()
            .every(function () {
                let column = this;
                let title = column.header(1).textContent;

                // Create input element
                let input = document.createElement('input');
                input.placeholder = title;

                input.className = 'form-control form-control-sm w100';
                input.style.fontSize = '12px';

                column.header(1).classList = "";
                column.header(1).removeAttribute("aria-sort");
                column.header(1).removeAttribute("aria-label");
                column.header(1).replaceChildren(input);

                //handle the click event on the column header
                $(column.header(1)).click(function (e) {
                    e.stopPropagation();
                });

                //handle the focus event of the cell and just put focus on the input
                $(column.header(1)).focus(function () {
                    input.focus();
                });

                // Event listener for user input
                input.addEventListener('keyup', () => {
                    if (column.search() !== this.value) {
                        column.search(input.value).draw();
                    }
                });
            });


        dt.on('order.dt search.dt', function () {
            dt.api().columns().every(function () {
                this.header(1).classList = "";
                this.header(1).removeAttribute("aria-sort");
                this.header(1).removeAttribute("aria-label");
            });
        });