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

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

edwinkohedwinkoh Posts: 7Questions: 2Answers: 0

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

Answers

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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

  • edwinkohedwinkoh Posts: 7Questions: 2Answers: 0

    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

  • edwinkohedwinkoh Posts: 7Questions: 2Answers: 0

    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/

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

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

    Hope that does the trick,

    Colin

  • honusbamhonusbam Posts: 1Questions: 0Answers: 0

    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");
                });
            });
    
Sign In or Register to comment.