Column Search within child rows

Aarons

Cross posting this question from Stackoverflow: http://stackoverflow.com/questions/30264693/

I have a datable that is using both child rows and column searching (filtering).

See this Sample JSFiddle: https://jsfiddle.net/muppmLbv/

Taken from the couple DataTables Examples: Child Rows and of Column Searching

When searching a column, I would like for the results to include information inside the child row.

For example, from the column searching example, the person may have multiple offices (Tokyo, London, and New York) that you could only see from expanding a child. I would like for the main row to display this person when ANY of the offices are entered, not just the one displayed on the row.

Is there a way to search through the data for a row, and not just the displayed text?

To duplicate in my example: If you search for the user Tiger Nixon, and expand them, they have section called All Offices. I would like for this user to be displayed when you search for "New York" (or any of these offices), not just the primary of Edinburgh.

allan

The child rows are effectively independent from the host row in the sense of sorting and filtering. So if you want the parent row to filter on that data, you need to include that data in the parent row (perhaps in a hidden column for example).

Allan

Aarons

Allan,

Thank you for the reply. I understand what you're saying, and figured this was the case.

How would I go about modifying the following code to search/filter by a different (hidden) column?

table.columns().every( function () {
    var that = this;
 
    $( 'input', this.footer() ).on( 'keyup change', function () {
        that
            .search( this.value )
            .draw();
    } );
} );

allan

You would use the column().search() method with column() documenting how you can select columns. The key is probably to decide how you tell the API which column you want to search on. You can also perform a global search using search().

Allan

Aarons

The code I shared above is using the column().search() method.

As you mentioned, the key could be to use the .search method, but somehow pass in which column you want to use for the search.

Do you know how I could pass in which specific column to use for the search, a hidden column in this case?

In other words, how would I modify the following to pass in a specific column to use for the search:

$( 'input', this.footer() ).on( 'keyup change', function () {
        that
            .search( this.value )
            .draw();
    } );

allan

The column index that you want to search on would be used as the column selector. You could set that using a data-* attribute on the column. Read that attribute and then use that index.

Allan

Aarons

Allan,

Thanks again for helping me with this.

I don't fully understand the solution you're proposing. Each column already has a data attribute on it. The new hidden column would have a data attribute as well (allOffices)

When calling search() in a column, how do I specify it to use data from another column (or a specific attribute from the data source) instead it's own column data?

allan

Assuming you HTML has something like <th data-search-index="3">My column title</th> you might use something like:

var header = this.header();
$( 'input', this.footer() ).on( 'keyup change', function () {
        that
            .column( header.getAttribute('data-search-index')*1 ) // *1 to make it a number
            .search( this.value )
            .draw();
    } );

That make sense?

Allan

Aarons

Awesome, that seems to work perfectly! Thanks so much for your help.

One separate issue to go with this, Now that I have a new hidden column I am using a render block to combine all of the data I need for the search. However, "visible":false doesn't seem to be working when I also have a render.

Is there another way to hide this new column?

Thank you again.

allan

Are you using Responsive? If so, you need to add the class never to the column to make Responsive never show it.

Allan