Need help using the Multi Column Search

Need help using the Multi Column Search

fly123fly123 Posts: 2Questions: 1Answers: 0
edited September 2017 in Free community support

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,364Questions: 26Answers: 4,956

    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

  • fly123fly123 Posts: 2Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,364Questions: 26Answers: 4,956
    Answer ✓

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

    Kevin

  • hm123hm123 Posts: 84Questions: 27Answers: 1
    edited August 2017

    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

  • kthorngrenkthorngren Posts: 21,364Questions: 26Answers: 4,956

    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

  • hm123hm123 Posts: 84Questions: 27Answers: 1

    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?

  • kthorngrenkthorngren Posts: 21,364Questions: 26Answers: 4,956

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

    Kevin

  • hm123hm123 Posts: 84Questions: 27Answers: 1

    That fixed it. Thanks Kevin.

This discussion has been closed.