how can I do range search in individual column search only using datatable

SandeepMurala

Hi ,
I have done range search by using this https://datatables.net/examples/plug-ins/range_filtering.html
and I have done invidival search also like below code

 $('#item tfoot th').each( function () {
     var title = $(this).text();
         $(this).html( '<input type="text" style = "width:70px;" placeholder="'+title+'" />' ); 
 } );

// DataTable
 var otable = $('#item').DataTable();

 // Apply the search
 otable.columns().every( function () {
 
     var that = this;
    
     $( 'input', this.footer() ).on( 'keyup change', function () {
        
         if ( that.search() !== this.value ) {
             // alert(this.value);          
             that
                 .search( this.value )
                 .draw();
         }
     } );
 } );

like above induvial seach.

This two scenarios are working fine for me but here I want do that range search in induvial search also like if you take one column like age ,To age we have induvial column search so in that input box if I enter like 20-30 I need to get in between 20 to 30 age rows should get .

I don't want Minimum age and Maximum age two separate input fields out of the table ,I want inside the table only and need to do induvial search and rang search in one input field.

Is it possible or not? ,if it is possible please help on it ,that is appreciated.

Thanks
Sandeep

kthorngren

To enter 20-30 in the search input you will still need the range search plugin. You will need to create in input handler specific to the column that can parse the input and store the values in global variables. Then in the search plugin, instead of getting the min and max from the inputs just use the global variables.

Kevin

SandeepMurala

@kthorngren ,
Thanks for you valuable response,

I am sorry i did not get you ,could you source code or any reference .

Please that is helpful for me. I haven't use that much this datatable .

Thanks
Sandeep

kthorngren

I took your code snippets above to create this example:
http://live.datatables.net/tivalozi/1/edit

The search plugin gets the age input and parses it by splitting at -. If there is no input it simply does a return true. The rest of the plugin code is the same.

In the click events it uses api column().index() to check if is the Age column. If so just use draw() for the plugin to run.

Kevin

SandeepMurala

@kthorngren thank you so much for your valuable answer .

SandeepMurala

@kthorngren, if I want to apply same functionality to another column in the same table along with AGE like experience table index is 6. how can I do that one?

I tried couple of if and else conidiation but I failed.

please suggest on it .

Thanks

kthorngren

One option is to create boolean variables for each column then have one return statement at the end that uses all the boolean values to determine if the row is to be shown. I updated the example with a check box to filter only Software Engineers and added that to the search plugin to show what I mean.
http://live.datatables.net/tivalozi/3/edit

Kevin

SandeepMurala

@kthorngren ,I really thanks to you and appreciated ,

last one question please ,there are some text columns , so how can we do in individual column search comma separated values .

For instance in Office column Tokyo,London,New York if search this values in I should get result of the search values .

Note : along with range search(age column ) it will work .

this is last one i am asking you help on it please ?

Thanks
Sandeep

colin

You can use regular expressions, see example here - if you enter Tokyo|London" into the Office search, and check "treat as regex". The|` character would need to be the delimiter though, not a comma.

Colin