2015-05-15 5 views
1

У меня есть данные, в которых используются как дочерние строки, так и поиск столбцов (фильтрация).DataTables - Поиск столбцов в дочерних строках

See this Sample JSFiddle

Взятые из пары DataTables примеров: Example of Child Rows - Example of Column Searching

При поиске колонки, я хотел бы, чтобы результаты, чтобы включить информацию внутри ребенка строки.

Например, из примера поиска столбца человек может иметь несколько офисов (Токио, Лондон и Нью-Йорк), которые вы могли видеть только при расширении ребенка. Я хотел бы, чтобы в главной строке отображался этот человек, когда был введен ЛЮБОЙ из офисов, а не только тот, который отображается в строке.

Есть ли способ поиска по данным для строки, а не только отображаемого текста?

Чтобы дублировать в моем примере: если вы ищете пользователя Tiger Nixon и расширьте его, у них есть раздел «Все офисы». Я хотел бы, чтобы этот пользователь отображался при поиске «Нью-Йорка» (или любого из этих офисов), а не только в основном в Эдинбурге.

Соответствующий JavaScript Код:

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('<input type="text" placeholder="Search '+title+'" />'); 
}); 


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

Как примечание, мои данные загружаются с помощью прямого вызова Ajax, и у меня есть полный контроль над данными, которые возвращаются.

Cross размещен на форуме DataTables here

+0

Вам не нужно жить AJAX в скрипку, чтобы продемонстрировать, что вы пытаетесь сделать. Если, конечно, если вы ожидаете, что содержимое дочерних строк, доставленное AJAX и поиск столбцов, будет полным поиском таблицы, сделанным сервером, то я скажу _good luck_ :) – davidkonrad

+0

@ davidkonrad Хорошая точка. Я добавил данные как только массив JavaScript и поместил скрипт в OP. – AaronS

ответ

0

У меня была аналогичная проблема, и г-н @davidkonrad был достаточно любезен, чтобы предложить решение обходной путь.

Смотрите мой вопрос здесь: DataTables search child row content

Смежные вопросы