Need help using the Multi Column Search

fly123

Hi, I read about the Multi filter feature described here: https://datatables.net/examples/api/multi_filter.html

And I've been trying for hours to get it to work on this code (which uses tabletop + datatables and pulls data from Google sheets).

Here's the code I want to apply the Multi Column Search feature in:

https://jsfiddle.net/hm123/c2h3xqo3/

I know it's something simple but I haven't been able to get it to work, where and how am I supposed to add the lines of code?

kthorngren

First you need add a footer, something like this:

$("#mySelection").append('<tfoot><tr><th>Company</th><th>Claims</th><th>Total</th></tr></tfoot>');

Then add the code from the example you referenced. I put it together in your example here:
https://jsfiddle.net/14sj1x6x/

Kevin

fly123

Hi, thanks for the reply, but I haven't been able to reproduce a result that way. Mind linking a saved jsfiddle so I can see how it's supposed to be? Thanks.

kthorngren

Sorry forgot to save it. Here it is:
https://jsfiddle.net/14sj1x6x/1/

Kevin

hm123

How does one get the search boxes to stay in line with the column width? Currently, adding these search boxes forces the columns to expand wider than it should be, it makes you scroll horizontally right in order to see the last column

kthorngren

How does one get the search boxes to stay in line with the column width?

Does this work for you?

tfoot input {
  width: 100%;
}

Kevin

hm123

As simple as it is, by my results I don't think I'm placing that line of code in the right place. Sorry for not getting it but I must ask, where does it go?

kthorngren

You can put it in the CSS section of that jsfiddle. Or you can put it within <style></style> tags in your html.

Kevin

hm123

That fixed it. Thanks Kevin.