Column Search within child rows

Column Search within child rows

AaronsAarons Posts: 13Questions: 5Answers: 0

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.

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 50,506Questions: 1Answers: 7,510 Site admin

    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

  • AaronsAarons Posts: 13Questions: 5Answers: 0

    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();
        } );
    } );
    
  • allanallan Posts: 50,506Questions: 1Answers: 7,510 Site admin

    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

  • AaronsAarons Posts: 13Questions: 5Answers: 0

    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();
        } );
    
  • allanallan Posts: 50,506Questions: 1Answers: 7,510 Site admin

    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

  • AaronsAarons Posts: 13Questions: 5Answers: 0

    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?

  • allanallan Posts: 50,506Questions: 1Answers: 7,510 Site admin
    Answer ✓

    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

  • AaronsAarons Posts: 13Questions: 5Answers: 0

    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.

  • allanallan Posts: 50,506Questions: 1Answers: 7,510 Site admin
    Answer ✓

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

    Allan

This discussion has been closed.