Плагин Datatables для поиска значений заголовков

Question

Я использую плагин dataTables jquery. У меня есть значение навыка как заголовок в моей таблице. Я хочу, чтобы пользователи использовали определенные навыки. Например, как показано на рисунке, я хочу найти пользователей, у которых есть умение php. Тогда я должен получить имя Джона. Для css я должен получить имя Моны. Снимок находится здесь:

Answer 1

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

Перед фильтрацией необходимо найти индекс столбца, который вы хотите фильтровать, и затем проверить значение в каждой строке. Это может выглядеть примерно так:

<input type="text" id="skillFilter" /> 
<table id="example"> 
    <thead> 
     <tr> 
      <th>Skills</th> 
      <th>PHP</th> 
      <th>CSS</th> 
      <th>HTML</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John</td> 
      <td>1</td> 
      <td>0</td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <td>Mona</td> 
      <td>0</td> 
      <td>1</td> 
      <td>0</td> 
     </tr> 
    </tbody> 
</table> 

сценарий:

$.fn.dataTable.ext.search.push(
    function(settings, data) { 
     if (skillFilterColumnIndex != undefined) { 
      //Get the data of each row 
      var data = data[skillFilterColumnIndex] || ""; 
      return data > 0; 
     } else { 
      return 1; 
     } 
    }); 

$("#skillFilter").change(function() { 
    var skill = $("#skillFilter").val().toLowerCase(); 
    //Find the column index with the skill to filter 
    $.each($("#example thead th"), function(index, element) { 
     if (index != 0 && element.innerHTML.toLowerCase() == skill) { 
      skillFilterColumnIndex = index; 
     } 
    }); 
    table.fnDraw(); 
});