Filtering - Different types of filtering on individual columns

lc180

Hi, I am using DataTables to display and filter data in my jsp page and it works great. I have a table with 6 columns and each is set-up with a dropdown list to filter the tables content. This is nice but one of the columns is a 'Description' column and it would be nice to filter based on text input for that individual column.

Is it possible to have multiple filter types on a table? Below is the code I use currently.

```js

$("#example tfoot td.st-filter").each( function ( i ) {
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
            var val = $(this).val();

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

        table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="' + d  + '">' + d + '</option>');
        } );      
} );

`

I've tried searching for an example of this but with no success. Any advice will be greatly appreciated!

daniel_r

You also can use my yadcf plugin for datatables it has 9 different filter types... http://yadcf-showcase.appspot.com/ tons of goodies are inside :)

lc180

Thanks for your reply daniel_r. Your plugin looks great and I will consider it in the future but want I'd like to know now is if its possibly to do this functionality without the use of a new plugin?

daniel_r

just add skip the relevant column in the loop and add manually input type text with on keyup that will do similar table.column( col_num ).search....

lc180

I've tried isolating the relevant column in my code but I get an error with the search(this.value) syntax.

```js

  $("#example tfoot td.st-unityFilter").each( function ( i ) {
    if(i==7){

        $("#example ").on( 'keyup change', function () {
            table
                .column( $(this).parent().index()+':visible' )
                .search( this.value )
                .draw();
        } );
    }
    else{
        var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
            var val = $(this).val();

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

        table.column( i ).data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="' + d  + '">' + d + '</option>');
        } );    
    }        
} );

`