title: DataTables - Column Search within child rows
body: <p>I have a datable that is using both child rows and column searching (filtering).</p>
  
  <p><a href="https://jsfiddle.net/muppmLbv/" rel="nofollow">See this Sample JSFiddle</a></p>
  
  <p>Taken from a couple DataTables Examples: <a href="https://www.datatables.net/examples/api/row_details.html" rel="nofollow">Example of Child Rows</a> - <a href="https://datatables.net/examples/api/multi_filter.html" rel="nofollow">Example of Column Searching</a></p>
  
  <p>When searching a column, I would like for the results to include information inside the child row. </p>
  
  <p>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.</p>
  
  <p>Is there a way to search through the data for a row, and not just the displayed text?</p>
  
  <p>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.</p>
  
  <p>Relevant JavaScript Code:</p>
  
  <pre><code>var table = $('#example').DataTable({
      data: mdata,
          "columns": [{
          "className": 'details-control',
              "orderable": false,
              "data": null,
              "defaultContent": ''
      }, {
          "data": "name"
      }, {
          "data": "position"
      }, {
          "data": "office"
      }, {
          "data": "salary"
      }],
          "order": [
          [1, 'asc']
      ]
  });
  
   $('#example tfoot th').each( function () {
      var title = $('#example thead th').eq( $(this).index() ).text();
      $(this).html( '&lt;input type="text" placeholder="Search '+title+'" /&gt;' );
  } );
  
  
  // Add event listener for opening and closing details
  $('#example tbody').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var row = table.row(tr);
  
      if (row.child.isShown()) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
      } else {
          // Open this row
          row.child(format(row.data())).show();
          tr.addClass('shown');
      }
  });
  
   // Apply the search
  table.columns().every( function () {
      var that = this;
  
      $( 'input', this.footer() ).on( 'keyup change', function () {
          that
              .search( this.value )
              .draw();
      } );
  } )
  </code></pre>
  
  <p>As a note, my data is loaded via a live Ajax call, and I do have full control over the data being returned.</p>
  
  <p>Cross posted on the Datatables forum <a href="https://datatables.net/forums/discussion/27851/" rel="nofollow">here</a></p>