Column filter

rosario.martone

Description of problem:
Hi everyone!
I am trying to find a way to customise the search into one of the column in my grid.
Values for this column can be dynamic: for example 100,101,102,1000.
I would like to limit the result to a very specific customisation. In the above values for example, I would like to search for 100,102 and only having as result rows where either 100 or 102 are present (not 1000 or 10201 for example).
Is that possible?
I am trying using the following syntax:

this.filter = (value) => {
    this.tableRef.column(`${this.columnName}:name`).search(value).draw();

    let searchPattern = value
        .split(',')
        .map(item => $.fn.dataTable.util.escapeRegex(item.trim()))
        .join('|');

    this.tableRef.column(`${this.columnName}:name`).search(searchPattern, true, false).draw();
}

but the result is coming with values containing for example 10050, 100321.

Thanks for help!
Ross

allan

Yes, you could build up a more complex regex expression that matches a number at the start, in the middle (with , on either side), or at the end, but I think I'd be tempted to just use a function to do it:

this.filter = (value) => {
    let searchParts = value.split(',');

    this.tableRef
        .column(`${this.columnName}:name`)
        .search((data) => {
            let dataParts = data.split(',');

            for (let i = 0; i < searchParts.length; i++) {
                if (dataParts.includes(searchParts[i])) {
                    return true;
                }
            }

            return false;
        })
        .draw();
};

I'm sure it is possible to code-golf that to be smaller, but hopefully in this form it is clear what is going on.

I'll confess I've not tested the code, so it might have a daft error in it somewhere, but again, hopefully it is clear what is happening - but let me know how you get on with it.

Allan

rosario.martone

Hi Allan!
I had to change a bit the code but it perfectly worked, thanks for help!
Leaving here for anyone who might have the same request:

this.filter = (value) => {
    if (value != "") {
        let searchParts = value.split(',');

        this.tableRef
            .column(`${this.columnName}:name`)
            .search((value) => {
                let dataParts = value.split(',');

                for (let i = 0; i < searchParts.length; i++) {
                    if (dataParts.includes(searchParts[i])) {
                        return true;
                    }
                }

                return false;
            })
            .draw();
    }
};

Ross

allan

Awesome - thanks for confirming. Good to hear that did the job for you.

Allan

rosario.martone

Hi Allan,
I have updated the script as following:

this.filter = (val) => {
    if (val.length > 0) {
        let searchParts = val.split(',');

        this.tableRef
            .column(`${this.columnName}:name`)
            .search((val) => {
                let dataParts = val.split(',');

                for (let i = 0; i < searchParts.length; i++) {
                    if (dataParts.includes(searchParts[i])) {
                        return true;
                    }
                }

                return false;
            })
            .draw();
    }
    else {
        let searchPattern = val
            .split(',')
            .map(item => $.fn.dataTable.util.escapeRegex(item.trim()))
            .join('|');

        this.tableRef.column(`${this.columnName}:name`).search(searchPattern, true, false).draw();
    }
};

What I noticed is that for a string like 100,200 when I type 100 the grid is correctly filtered. However, when I type 200 the rows are not displayed? I would expect the includes to work as contains instead of startswith?

Ross

allan

That is correct - it should. Are you able to link to a test case showing the issue please?

One thing that could be confusing in that code is that val is shadowed. It is passed in on line 1 and another one on line 7. I don't think that is the issue, but worth watching for.

Beyond that, I think it would be a bit of debugging on it to see what is going wrong.

Allan

rosario.martone

Hi Allan
I have sorted now!
Strings were having a space which was causing the issue....

Example: 100, 200 and not 100,200!
I will trim the values and it will work as expected. Thanks for your support mate, much appreciated!

Ross

allan

Awesome - nice find .

Allan