Ящики поиска данных Datatables

Question

Я хочу выполнить поиск по моему Datatable, но я хочу, чтобы рекламные поля для размещения были помещены в определенную позицию. Я наткнулся на какой-то код, который я изменил, поэтому он иллюстрирует мою проблему (вы можете проверить это в скрипке ниже). В основном у меня есть четыре div, расположенных за пределами таблицы, и каждый из них предназначен для поиска определенного столбца. Тем не менее, я с трудом пытаюсь заставить его работать.

Любая помощь будет очень признательна!

Вот JSFiddle.

И код:

<div> 
    <label>Name:</label> 
    <input id="Name" type="text"> 
</div> 
<div> 
    <label>Position:</label> 
    <input id="Position" type="text"> 
</div> 
<div> 
    <label>Office:</label> 
    <input id="Office" type="text"> 
</div> 
<div> 
    <label>Age:</label> 
    <input id="Age" type="text"> 
</div> 
<br/> 
<br/> 
<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
    </thead> 
    <tfoot> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Age</th> 
     <th>Start date</th> 
     <th>Salary</th> 
    </tr> 
    </tfoot> 
    <tbody> 
    <tr> 
     <td>Tiger Nixon</td> 
     <td>System Architect</td> 
     <td>Edinburgh</td> 
     <td>61</td> 
     <td>2011/04/25</td> 
     <td>$320,800</td> 
    </tr> 
    <tr> 
     <td>Garrett Winters</td> 
     <td>Accountant</td> 
     <td>Tokyo</td> 
     <td>63</td> 
     <td>2011/07/25</td> 
     <td>$170,750</td> 
    </tr> 
    <tr> 
     <td>Ashton Cox</td> 
     <td>Junior Technical Author</td> 
     <td>San Francisco</td> 
     <td>66</td> 
     <td>2009/01/12</td> 
     <td>$86,000</td> 
    </tr> 
    <tr> 
     <td>Cedric Kelly</td> 
     <td>Senior Javascript Developer</td> 
     <td>Edinburgh</td> 
     <td>22</td> 
     <td>2012/03/29</td> 
     <td>$433,060</td> 
    </tr> 
    <tr> 
     <td>Gavin Cortez</td> 
     <td>Team Leader</td> 
     <td>San Francisco</td> 
     <td>22</td> 
     <td>2008/10/26</td> 
     <td>$235,500</td> 
    </tr> 
    <tr> 
     <td>Martena Mccray</td> 
     <td>Post-Sales support</td> 
     <td>Edinburgh</td> 
     <td>46</td> 
     <td>2011/03/09</td> 
     <td>$324,050</td> 
    </tr> 
    <tr> 
     <td>Unity Butler</td> 
     <td>Marketing Designer</td> 
     <td>San Francisco</td> 
     <td>47</td> 
     <td>2009/12/09</td> 
     <td>$85,675</td> 
    </tr> 
    <tr> 
     <td>Howard Hatfield</td> 
     <td>Office Manager</td> 
     <td>San Francisco</td> 
     <td>51</td> 
     <td>2008/12/16</td> 
     <td>$164,500</td> 
    </tr> 
    <tr> 
     <td>Donna Snider</td> 
     <td>Customer Support</td> 
     <td>New York</td> 
     <td>27</td> 
     <td>2011/01/25</td> 
     <td>$112,000</td> 
    </tr> 
    </tbody> 
</table> 

JavaScript:

$(document).ready(function() { 
    // Setup - add a text input to each footer cell 
    $('#example tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search ' + title + '" />'); 
    }); 
    // DataTable 
    var table = $('#example').DataTable(); 
    // Apply the search 
    table.columns().every(function() { 
    var that = this; 
    $('input', this.footer()).on('keyup change', function() { 
     if(that.search() !== this.value) { 
     that.search(this.value).draw(); 
     } 
    }); 
    }); 
}); 

CSS:

tfoot input { 
    width: 100%; 
    padding: 3px; 
    box-sizing: border-box; 
} 

Answer 1

Вам нужно что-то вроде YADCF фильтрации плагин для DataTables. Это позволит вам фильтровать столбцы с внешними элементами управления вводом.