Применить поиск столбца к текущему jQuery DataTable

Question

Приветствую всех моих коллег-кодеров.

У меня есть текущий DataTable JQuery в месте, которое функционирует должным образом:

var $dataTable = $('#example1').DataTable({ 
    "ajax": 'api/tableSearch.php', 
    "iDisplayLength": 25, 
    "order": [[ 6, "desc" ]], 
    "scrollY": 600, 
    "scrollX": true, 
    "bDestroy": true, 
    "columnDefs": [{ 
    "targets": 0, 
    "render": function (data, type, full, meta){ 
     return '<a class="editLink" href="#">Edit</a><a class="deleteLink" href="#">Del</a>': 
    } 
    }] 
}); 

Как указывалось выше, приведенный выше код работает соответствующим образом ... фильтр поиска работы, сортировочные работы, все работает.

То, что я хотел бы сделать, это добавить поиск столбца этой DataTable, как показано здесь:
https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

Я попытался добавить код из ссылки выше моего текущего кода, следующим образом:

var $dataTable = $('#example1').DataTable({ 
    "ajax": 'api/tableSearch.php', 
    "iDisplayLength": 25, 
    "order": [[ 6, "desc" ]], 
    "scrollY": 600, 
    "scrollX": true, 
    "bDestroy": true, 
    "columnDefs": [{ 
    "targets": 0, 
    "render": function (data, type, full, meta){ 
     return '<a class="editLink" href="#">Edit</a><a class="deleteLink" href="#">Del</a>': 
    } 
    }], // begin here 
    initComplete: function(){ 
    this.api().columns().every(function(){ 
     var column = this; 
     var select = $('<select><option value=""></option></select>') 
     .appendTo($(column.footer()).empty()) 
     .on('change', function() { 
     var val = $.fn.dataTable.util.escapeRegex(
      $(this).val() 
      ); 
     column 
      .search(val ? '^'+val+'$' : '', true, false) 
      .draw(); 
     }); 
     column.data().unique().sort().each(function (d, j) { 
      select.append('<option value="'+d+'">'+d+'</option>') 
     }); 
     }); 
     } 
    });   
});  

У меня не было ошибок, и DataTable все еще загружается, но поиска столбцов там нет.

Я использую jQuery-2.1.3.min, поэтому он должен быть актуальным.

Кто-нибудь видит, что я делаю неправильно, и что я могу сделать, чтобы исправить эту проблему?

Answer 1

Добавить <tfoot> к вашему столу. Выражение, ссылающееся на column.footer(), ожидает, что оно будет существовать.