如何搜索子行内容

Question

我希望this demo能够与筛选器一起使用，而不是删除其子项包含要筛选的数据的条目。

E.g.在示例中，如果您筛选了5407 Airi Satou不会被删除，甚至可能会扩展子数据。

HTML和JS

/* Formatting function for row details - modify as you need */ 
function format (d) { 
    // `d` is the original data object for the row 
    return '<div class="slider">'+ 
     '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
      '<tr>'+ 
       '<td>Full name:</td>'+ 
       '<td>'+d.name+'</td>'+ 
      '</tr>'+ 
      '<tr>'+ 
       '<td>Extension number:</td>'+ 
       '<td>'+d.extn+'</td>'+ 
      '</tr>'+ 
      '<tr>'+ 
       '<td>Extra info:</td>'+ 
       '<td>And any further details here (images etc)...</td>'+ 
      '</tr>'+ 
     '</table>'+ 
    '</div>'; 
} 

$(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(); 
     } 
    }); 
}); 

CSS

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; 
} 

Answer 1

SOLUTION

为了jQuery的数据表来搜索您需要添加在所显示的数据子行子表行隐藏到主表中 列。

例如，你可以使用columns.visible选项extn数据属性添加隐藏列，如下图所示：

的JavaScript：

"columns": [ 
     { 
      "class":   'details-control', 
      "orderable":  false, 
      "data":   null, 
      "defaultContent": '' 
     }, 
     { "data": "name" }, 
     { "data": "position" }, 
     { "data": "office" }, 
     { "data": "salary" }, 
     { "data": "extn", "visible": false }    
    ], 

HTML：

<thead> 
    <tr> 
     <th></th> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Salary</th> 
     <th>Extn.</th> 
    </tr> 
</thead> 

DEMO

见this jsFiddle代码和演示。