Add wildcard % search to a drowdown filter to specific column

Lara20

Hi there,

I have a datatable with dropdown filters for multiple columns. My column 5 shows me different entries like web1, web2, web3, pc1,pc2 etc. I now want to add an extra value to the dropdown for column 5 called web% and pc% to return all the entries starting with web or starting with pc.
I came as far as below, I can add a value, but right now it will show also in the other columns which makes sense, but even worse it does not work. Is this easily possible? I hope someone can give me a hint. Thank you in advance.

``` initComplete: function () {

        this.api().columns([2, 3, 5,6,7]).every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty())
                .on( 'change', function () {


                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    console.log()
                    column
                        .search( val ? '^'+val+'?$' : '', true, false )
                        .draw();
                } );
            select.append( '<option value="Web">Web%</option>' )
            column.data().unique().sort().each( function ( d, j ) {

                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }

```

kthorngren

but right now it will show also in the other columns

Use an if statement to limit the columns line 16 is applied to.

but even worse it does not work. Is this easily possible?

The search is using regex searching. Without seeing your data its hard to say but I don't think the ? in your regex string '^'+val+'?$' is going to match what you want. Try removing the ? and change your option value to contain .*, like this:
'<option value="Web.*">Web%</option>'

If this doesn't help please build a simple test case we can look at so we can help you setup the regex correctly.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

One option for the if statement is to use column().index() to limit by the column index or indexes you want to use the wildcard option.

Kevin

Lara20

Brilliant. Thank you so much it does work. In case someone else needs it:

          var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty())
                .on( 'change', function () {


                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'.*$' : '', true, false )
                        .draw();
                } );

            if(column.index() == 5){
                select.append( '<option value="Web">Web%</option>' )
            }

            column.data().unique().sort().each( function ( d, j ) {

        select.append( '<option value="'+d+'">'+d+'</option>' )
    } );
} );

}