Help with programmatically setting filter type for a column in ColumnControl.

michael_657

Link to test case: https://live.datatables.net/fahenuga/1/edit

Description of problem:
Having trouble programmatically setting the filter type for a column. Setting the selection option can be done but I'm unable to trigger the update of the associated search type icon ('.dtcc-search-type-icon') or the clear icon.

Saw this post but the 'triggerNative' function doesn't seem public or I'm using it wrong.

I'm using just a basic setup for the ColumnControl and attempting to change the filter type and icon.

{
    columnControl: {
        target: 'thead:1',
        content: ['search']
    }
}

const DtCCHead = $('#myTable > thead > tr:nth-child(2) > td[data-dt-column="2"] span.dtcc > div > div').eq(1);
DtCCHead.find('select').val('notEqual').trigger('change').trigger('click').trigger('mouseup').trigger('mousedown');
DtCCHead.find('input').val('Tokyo').trigger('change');

allan

The post you linked to is the way to do programmatic control of ColumnControl dropdowns at the moment.

Here is an update to your test case showing it working with the triggerNative plugin.

Allan

michael_657

Ah, figures it was something obvious. Thanks!

For anybody who comes by, here's a partial code snippet. I've got a lot of utility functions built for use with DataTables. So, this is the simplest point to cutoff at.

function SetColumnControlFilterByIdx(TableSelector, ColumnIdx, FilterOptionValue, FilterValue = "")
{
    const TableHeader = GetDtTableHead(TableSelector);
    const ColumnControlRow = TableHeader?.find('tr:has(.dtcc)');
    const CCHeader = ColumnControlRow?.find(`td[data-dt-column="${ColumnIdx}"]`);
    const ColumnFilterSelect = CCHeader?.find('select');
    const ColumnFilterInput = CCHeader?.find('input');
    
    ColumnFilterSelect?.val(FilterOptionValue).triggerNative('change');
    ColumnFilterInput?.val(FilterValue).triggerNative('input');
}

function ClearCCFilters(TableSelector)
{
    const TableHeader = GetDtTableHead(TableSelector);
    const ColumnControlRow = TableHeader?.find('tr:has(.dtcc)');
    const CCClears = ColumnControlRow?.find('td[data-dt-column] .dtcc-search-clear');
    
    for(const ClearCol of CCClears ?? [])
    {
        if($(ClearCol).is(':visible'))
        {
            $(ClearCol).triggerNative('click');
        }
    }
}