title: How to search child row content
body: <p>I would like <a href="http://datatables.net/blog/2014-10-02" rel="nofollow">this demo</a> to work with the filter, not removing entries whose children have the data that you are filtering for. </p>
  
  <p>E.g. in the example if you filter for <code>5407</code> Airi Satou does not get deleted and maybe even the child data gets expanded.</p>
  
  <p>HTML and JS</p>
  
  <pre><code>/* Formatting function for row details - modify as you need */
  function format ( d ) {
      // `d` is the original data object for the row
      return '&lt;div class="slider"&gt;'+
          '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;'+
              '&lt;tr&gt;'+
                  '&lt;td&gt;Full name:&lt;/td&gt;'+
                  '&lt;td&gt;'+d.name+'&lt;/td&gt;'+
              '&lt;/tr&gt;'+
              '&lt;tr&gt;'+
                  '&lt;td&gt;Extension number:&lt;/td&gt;'+
                  '&lt;td&gt;'+d.extn+'&lt;/td&gt;'+
              '&lt;/tr&gt;'+
              '&lt;tr&gt;'+
                  '&lt;td&gt;Extra info:&lt;/td&gt;'+
                  '&lt;td&gt;And any further details here (images etc)...&lt;/td&gt;'+
              '&lt;/tr&gt;'+
          '&lt;/table&gt;'+
      '&lt;/div&gt;';
  }
  
  $(document).ready(function() {
      var table = $('#example').DataTable( {
          "ajax": "/examples/ajax/data/objects.txt",
          "columns": [
              {
                  "class":          'details-control',
                  "orderable":      false,
                  "data":           null,
                  "defaultContent": ''
              },
              { "data": "name" },
              { "data": "position" },
              { "data": "office" },
              { "data": "salary" }
          ],
          "order": [[1, 'asc']]
      } );
  
      // 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
              $('div.slider', row.child()).slideUp( function () {
                  row.child.hide();
                  tr.removeClass('shown');
              } );
          }
          else {
              // Open this row
              row.child( format(row.data()), 'no-padding' ).show();
              tr.addClass('shown');
  
              $('div.slider', row.child()).slideDown();
          }
      } );
  } );
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>td.details-control {
      background: url('/examples/resources/details_open.png') no-repeat center center;
      cursor: pointer;
  }
  
  tr.shown td.details-control {
      background: url('/examples/resources/details_close.png') no-repeat center center;
  }
  
  div.slider {
      display: none;
  }
  
  table.dataTable tbody td.no-padding {
      padding: 0;
  }
  </code></pre>