Footer Filter with Range Above

peterbelove

I have created the example in below link, in which I am able to make the search boxes in the footer and search to match the exact string/value in that column.

http://live.datatables.net/hadazohu/1

I have footer search box in 'Age' and 'Salary', but I'd like to have a range filter, e.g. if I put 1000, it will display all the values above 1000 from that column.

I found something similar in this page, but now sure how to integrate it to my example.
https://datatables.net/examples/plug-ins/range_filtering.html

Can anyone shed some any light on?

thanks in advance!

kthorngren

I updated your example and modified the range_filtering code you linked to here:
http://live.datatables.net/xasofiya/1/edit

You can see this work if you type 2000 into the Age input. You can add the Salary column as a second search plugin if you want to perform and AND search. If you want to use an OR search between the two columns then you will need to add the Salary column into the same search plugin and update the if statement to be more like the range_filter example.

Kevin

peterbelove

thanks a lot!

but somehow if I add:

scrollX: true,

it doesn't work any more. any idea how to fix that?

colin

It's probably because of the layer that scrollX adds. This example here should help, it shows how to add elements to the header when scrolling is enabled.

Colin

peterbelove

Indeed, in chrome I see this error when adding scroll functions.

"[DOM] Found 2 elements with non-unique id".

I've tried to follow your example, but still couldn't to figure that out.

I created this example, wondering if you could help.

http://live.datatables.net/xasofiya/3/

kthorngren

scrollX clones the header and footer to allow for the scrolling to work. This is why you are seeing duplicate ID's. One option is to change form using id to name. Since there are now too inputs with the same name you. will want to get the second input's value, something like $($('input[name="col3"]')[1]).val(). Here is the updated example:
http://live.datatables.net/xasofiya/5/edit

This is one way to do this. You may find something better.

Another option might be to save the input value in the keyup change event in a global variable. Use that global variable in the search plugin. This will result in one look up versus the two needed with the double jQuery lookups with $($('input[name="col3"]')[1]). This difference might be noticeable with many rows.

Kevin

peterbelove

thanks a lot! that's really helpful.