How to apply filter to a specific table?

alchemi

Hi,

On pid2.lindenlion.net you have a sandbox version of my site. I have an issue with the table filter. I have two nested tables, like this:

1.
2.
3.

Can be expanded by clicking on the patient id field # for example like this:

1.
    1.1.
2.
    2.1.
    2.2.
    2.3. etc.
3.

In fact, 1.1. and 2.1. are in the same table (history), and to make sure only relevant rows are shown in the subtable, I apply a filter like so:

    // Filter table
    $.fn.dataTable.ext.search.pop();
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
          if (pat_id == data[0]) {
            return true;
          }
          return false;
        }
    );

This seems to work, but I have problems when editing fields in the main table (not in the subtable): all rows disappear, except the one where I last expanded the subtable. I guess this has something to do with which table the search filter is applied to. How can I prevent this odd behaviour?

To reproduce the issue, go to https://pid2.lindenlion.net and expand a row by clicking on the patient id number or on the history link and then edit a field in the main table, not the subtable. The same is true if I try to add a new row to the main table after expanding a subtable.

colin

Hi @alchemi ,

Is that link still working? It points to two other tables - but neither of those have child rows.

Cheers,

Colin

alchemi

Oh the link should have been https://pid2.lindenlion.net/reports.html sorry about that, the child rows can be toggled by clicking on the row number or on the history link.

colin

Hi @alchemi ,

Yep, it looks like your comment above is correct - the search you've applied is affecting it. It's because when the edit is submitted, it causes the parent table to redraw, and since the filter you've applied is global, it affects both the child and parent table.

The solution would be to apply a filter to the child table, rather than globally. You can to that in the initComplete function for the child table, something like:

    initComplete: function() {
      this.api().column(0).search(pat_id).draw();
    }

Cheers,

Colin

alchemi

Yes that worked beautifully, thank you!

alchemi

Here is an update:
It worked too well: the search(pat_id) function when searching for 7 found not only 7, but also 17, 72, 174, 107, 77, etc. so I had to find a way to select only the exact matches, not the needle in haystack matches.

My final solution therefore is:

initComplete: function() {
  this.api().column(0).search('^'+pat_id+'$', true).draw();
}

I don't know if there is a more performant way of doing this search, but this worked for me.

colin

Hi @alchemi ,

Yep, that's the best way to do it - regexs are perfect for that,

Cheers,

Colin