DataTables поиск содержимого дочерней строки

Я должен спросить: что заставляет вас верить, что вы можете искать в содержимом дочерней строки, которую вы вводите динамически, только когда отображаются дочерние строки? А как column() поиск может охватывать контент из других строк, когда-либо?

когда это сказано, есть, конечно, обходной путь. Вместо того, чтобы создавать содержимое дочерней строки снова и снова, держите его в массиве :

var details = [];

теперь, когда вы инициализируете таблицу, вы инициализируете содержимое дочерней строки :

...
columns: [{
   className: 'details-control',
   orderable: false,
   data: null,
   defaultContent: '',
   render: function(data, type, row, meta) {  
      details[meta.row] = format(data);
   }    
}, 
...

в функции format () добавьте класс в поле добавочного номера для удобства доступа :

'<td class="extNo">' + d.extn + '</td>' +

когда вы показываете дочерние строки, вставьте предварительно созданный контент из details[] вместо format() :

if (row.child.isShown()) {
   row.child.hide();
   tr.removeClass('shown');
} else {
   row.child(details[row.index()]).show();            
   tr.addClass('shown');
}

создайте фильтр, который возвращает только строки, которые имеют details[] дочерняя строка, содержащая определенный добавочный номер:

function filterByDetailsExtNo(extNo) {
    $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
       return $(details[dataIndex]).find('.extNo').text() == extNo;
    }    
  )
  table.draw();
  $.fn.dataTable.ext.search.pop();
}  

используйте этот пользовательский фильтр вместо column() поиск в обработчиках ввода :

table.columns().every( function () {
    $( 'input', this.footer() ).on( 'keyup change', function () {
        filterByDetailsExtNo(this.value);
    });
});

раздвоенная скрипка -> https://jsfiddle.net/7o67vhrz/

обновление. Чтобы применить вышеуказанный фильтр к общему поисковому окну:

$('.dataTables_filter input')
   .off()
   .on('keyup', function() {
      filterByDetailsExtNo(this.value);
   });    

еще одна раздвоенная скрипка -> https://jsfiddle.net/ds3qp41g/

. Комбинируйте поиск деталей и" родной " поиск

function filterByDetailsExtNoAndInput(term) {
      $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            if ($(details[dataIndex]).find('.extNo').text() == term) return true;
            for (var i=0;i<data.length;i++) {
                if (data[i].toLowerCase().indexOf(term.toLowerCase())>=0) {
                    return true
                }    
            }   
            return false;
        }    
      )
      table.draw();
      $.fn.dataTable.ext.search.pop();
    }  

скрипка -> https://jsfiddle.net/h2u4fowj/

это довольно старая тема, и принятый ответ действительно работает, но я хотел предложить альтернативное решение.

у меня была такая же проблема, не имея возможности искать в дочерних строках, и мое решение состояло в том, чтобы сделать скрытый <td> В конце моей таблицы, содержащей данные в дочерних строках - таким образом, индексатор видит это, но пользователь этого не делает.

для ограниченного HTML, я добавил новый столбец:

<th class="hidden">Data</th>

затем, в пределах DataTables звоните:

//Within var table = $('#table').DataTable( {....
columns : [
        //{ className : 'details-control'},
        { data : 'a' }, //a-e are the columns I want the user to see.
        { data : 'b' },
        { data : 'c' },
        { data : 'd' },
        { data : 'e' },            
        // this last one is my "index helper"
        { data : 'comments',
          render : function(data, type, full, meta) {
            return full.f + full.g + full.h + full.i;
          }
         }
    ],

тогда вам просто нужно скрыть эту колонку. Вы можете сделать это либо через рекомендуемый метод DataTables:

https://datatables.net/examples/basic_init/hidden_columns.html

или через метод, который я выбрал:

"createdRow" : function (row,data,index) {
    $('td',row).eq(6).addClass('hidden');
}

//and the css...
.hidden {
 visibility: hidden;
}

у вас остался один <td> В конце вашей таблицы, которая содержит все из дочерних строк, но она невидима, и она работает с полем поиска/фильтром.