How can I use regular expressions for DataTable().search across multiple tables?

How can I use regular expressions for DataTable().search across multiple tables?

nightmare637nightmare637 Posts: 14Questions: 3Answers: 0

I have custom search bar on my page, and I am able to freely search from within all my datatables using the following:

$("#Search_All").keyup(function () {
    $('td table').DataTable().search(this.value).draw();
})

It works without any issues whatsoever. However, on a drop down I have, I need to pass a regular expression. I have the following code, which is nearly identical:

$('#selectMonth').change(function(){
    $('td table').DataTable().search(this.value,true).draw();
});

According to the documentation, I just need to add pass a boolean for "true" to the second parameter: https://datatables.net/reference/api/search(). However, it seems like the search function is interpreting it as a literal value, rather than a regular expression. As such, rather than filtering out my results, it just shows that there is nothing in my table.

I've hardcoded the regular expression (for now) to test as "^(03)". That is, I am looking for anything that starts with 03 (for the month), which can be followed by anything else. On a separate project, I am able to get this to work on a single data table. Unfortunately, it is not working on this project that has multiple data tables I need to search across.

How can I get my regular expression to work across multiple tables?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    There's no reason that shouldn't work. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • nightmare637nightmare637 Posts: 14Questions: 3Answers: 0

    Apologies for not leaving a test case; I have recreated my issue here:

    https://jsfiddle.net/nxf1hLqv/

    You'll notice if you select March, which is not passed as a regular expression, there are no issues and shows the table is indeed working. But February and January pass regular expressions, and nothing comes up.

    If possible, I'd like to search only in column 3 of my nested tables. Though to begin with, I was just trying to get regular expressions to work.

    Thank you so much for all your help!

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    It looks like your HTML for the table is messed up. Within the <tdbody> there's only a single row, with multiple tables defined within that single row. If you try and filter on that you're going to run into all sorts of problems. It would be worth looking at that first and confirming the structure is how you want,

    Colin

  • nightmare637nightmare637 Posts: 14Questions: 3Answers: 0

    Thanks for the reply! I do need my structure to be a nested table. Specifically, the outer table will contain all my headers and act as a single point to interact with all the different tables contained within. All the nested tables will contain the exact same structure, only different data and number of rows.

    I didn't consider the effect that <tbody> would have; I have since modified my code. I tried remove <tbody> from the parent table and including it in the nested tables. I also tried including it in both. Unfortunately, neither scenario resolved my issue. Here is my updated code with the <tbody> tag in both parent and child tables:

    https://jsfiddle.net/3rwf6h7p/2/

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974
    Answer ✓

    When using a selector like $(td table) that can select more than one table you need to use the table() or tables() API to get the actual API for the desired tables. You can use column().search() to search a specific column. I updated your example a bit:
    https://jsfiddle.net/dchs1atw/1/

    It uses this:

    $('td table').DataTable().tables().column(3).search(this.value, true).draw();
    

    The tables() docs indicate that this should execute against all tables. The example in the docs with order() does execute against all tables. See this example, any drop down change will change the order of the dates to desc.
    https://jsfiddle.net/dchs1atw/2/

    Maybe @allan or @colin can explain why column().search() doesn't work the same.

    Looks like you will need to use the table() to search each table individually. Comment out the first search and uncomment the other 3 to see the search work.

    Kevin

  • nightmare637nightmare637 Posts: 14Questions: 3Answers: 0

    Once again, @kthorngren , you've resolved my issue. Thank you so much! You and the other folks here have done an outstanding job answering my questions. Thank you guys so much, I really appreciate it!!!

    I'll mark this question as answered, but was wondering if you could clarify something I don't quite understand. Specifically, I don't quite understand when to use table, tables, dataTable(), and DataTable()..

    In my original question, I'm can search through everything with just DataTables().search(). Why am I able to use this, but the not have it work with a regular expression? Just as well, when I try using the tables() api, it only works on one table. Conversely, the solution was to use table(#) rather than tables(), and iterate through each one with a for loop.

    I've looked through the documentation over and over, but it feels like I'm just not understanding the bigger picture. No worries if you don't follow up on this; my original question was answered, so I'm happy either way.

Sign In or Register to comment.