Поиск во входном файле и выбор

Question

У меня есть набор данных, созданный в приложении, где строки содержат поля ввода, и я сортирую и фильтрую таблицы на основе текстовых значений полей ввода. Мне удалось правильно отсортировать, но я не могу на всю жизнь найти работу. Я думаю, что проблема связана с тем, что таблица генерируется и динамически заполняется другим JavaScript, который выполняется до того, как на него будут вызываться datatables.

Вот JavaScript до сих пор:

/* Create an array with the values of all the input boxes in a column */ 
    $.fn.dataTable.ext.order["dom-text"] = function (settings, col) 
    { 
     return this.api().column(col, {order:"index"}).nodes().map(function (td, i) { 
      return $("input", td).val(); 
     }); 
    } 

    /* Create an array with the values of all the input boxes in a column, parsed as numbers */ 
    $.fn.dataTable.ext.order["dom-text-numeric"] = function (settings, col) 
    { 
     return this.api().column(col, {order:"index"}).nodes().map(function (td, i) { 
      return $("input", td).val() * 1; 
     }); 
    } 

    /* Create an array with the values of all the select options in a column */ 
    $.fn.dataTable.ext.order["dom-select"] = function (settings, col) 
    { 
     return this.api().column(col, {order:"index"}).nodes().map(function (td, i) { 
      return $("select", td).val(); 
     }); 
    } 


     $(document).ready(function() { 

     var table = $("#service_group0").DataTable({ 
       "searching": true, 
       "ordering": true, 
       "columns": [ 
        { "orderDataType": "dom-text", type: \'html\' }, 
        { "orderDataType": "dom-select",type: \'html\' }, 
        { "orderDataType": "dom-text" , type: \'string\'}, 
        { "orderDataType": "dom-text", type: \'string\' }, 
        { "orderDataType": "dom-text", type: \'string\'}, 
        { "orderDataType": "dom-select" }, 
        { "orderDataType": "dom-select" }, 
        { "orderDataType": "dom-text-numeric"}, 
        { "orderDataType": "dom-text", type: \'date\'}, 
        null, 
        { "orderDataType": "dom-select" }, 
        { "orderDataType": "dom-text-numeric"}, 
        { "orderDataType": "dom-select" }, 
        { "orderDataType": "dom-text", type: \'string\' }, 
        { "orderDataType": "dom-text", type: \'string\' }, 
        { "orderDataType": "dom-text", type: \'date\'}, 
        null, 
        null 
       ], 
       initComplete: function() { 
        this.api().columns().every(function() { 
         var column = this; 
         if(column.index() == 5){ 
          var select = $("<select id=\'strength_search\'></select>") 
           .appendTo($(column.footer()).empty()); 
           var strength_hidden = document.getElementById("strength_hidden").value; 
           select.append(strength_hidden); 
         } 
         else if(column.index() == 6){ 
          var select = $("<select id=\'dose_search\'></select>") 
           .appendTo($(column.footer()).empty()); 
           var dose_hidden = document.getElementById("dose_hidden").value; 
           select.append(dose_hidden); 
         } 
        }); 
       } 
      }); 

Существует просто много HTML, чтобы вставить здесь, так что я создал jsfiddle: http://jsfiddle.net/q715LncL/12/

Если вы идете в jsfiddle и типа вещи в пустые текстовые поля, затем перейдите в окно поиска и попытайтесь фильтровать на основе того, что вы ввели в нем, всегда не получая никаких результатов. Как я могу заставить его фильтровать изменения, внесенные в живые входы?

Answer 1

Вам необходимо добавить функцию пользовательского фильтра, которая проверяет значения полей ввода, DataTables преобразует HTML в строки и вы не можете восстановить из них живое значение, поэтому вам нужно будет сделать что-то вроде этого:

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) { 
     var searchTerm = $('.dataTables_filter input').val(); 
     var $row = $('.dataTable tbody tr').eq(dataIndex); 

     if(!searchTerm) { 
     return true; 
     } 

     return $row.find('td input').filter(function() { 
     return ~$(this).val().toLowerCase().indexOf(searchTerm.toLowerCase()) 
     }).size(); 
    } 
); 

http://jsfiddle.net/q715LncL/14/

Answer 2

РЕШЕНИЕ

Вы можете использовать columnDefs для таргетинга на конкретный столбец с использованием индекса на основе нуля в targets и render для возврата выбранного значения во время поиска (type === 'filter') или сортировки (type === 'order').

columnDefs: [ 
    { 
     targets: [0,1,2,3,4,5,6], 
     render: function(data, type, full, meta){ 
     if(type === 'filter' || type === 'sort'){ 
      var api = new $.fn.dataTable.Api(meta.settings); 
      var td = api.cell({row: meta.row, column: meta.col}).node(); 
      data = $('select, input', td).val(); 
     } 

     return data; 
     } 
    } 
] 

Кроме того, необходимо аннулировать данные ячейки один раз изменения данных, как показано ниже (в соответствии с this solution).

$('tbody select, tbody input', table.table().node()).on('change', function(){ 
    table.row($(this).closest('tr')).invalidate(); 
}); 

DEMO

См this jsFiddle для кода и демонстрации.

ПРИМЕЧАНИЕ

я прокомментировал код, который вызывает ошибки JavaScript из-за несуществующие элементы.