DataTables главный фильтр раздаточной <select>

Я использую: jquery.dataTables.js от: https://datatables.net DataTables главный фильтр раздаточной <select>

У меня есть столбцы: движок рендеринга браузера, Платформа (ы), версия двигателя, CSS класс

Мои вопрос заключается в том, как сделать фильтр выбора: механизмом рендеринга

это мой образец. https://jsfiddle.net/vremx1gd/1/

Я хочу сделать этот фильтр работает:

<div class="form-group col-md-4 no-padding"> 
     <select class="form-control" id="sel1"> 
     <option>Filter by </option> 
     <option></option> 
     <option></option> 
     <option></option> 
     </select> 
    </div>

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example"> 
    <thead> 
     <tr> 
      <th>Rendering engine</th> 
      <th>Browser</th> 
      <th>Platform(s)</th> 
      <th>Engine version</th> 
      <th>CSS grade</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd gradeX"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 4.0</td> 
      <td>Win 95+</td> 
      <td class="center"> 4</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="even gradeC"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 5.0</td> 
      <td>Win 95+</td> 
      <td class="center">5</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="odd gradeA"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 5.5</td> 
      <td>Win 95+</td> 
      <td class="center">5.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="even gradeA"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 6</td> 
      <td>Win 98+</td> 
      <td class="center">6</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="odd gradeA"> 
      <td>Trident</td> 
      <td>Internet Explorer 7</td> 
      <td>Win XP SP2+</td> 
      <td class="center">7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="even gradeA"> 
      <td>Trident</td> 
      <td>AOL browser (AOL desktop)</td> 
      <td>Win XP</td> 
      <td class="center">6</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Firefox 1.0</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Firefox 1.5</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Firefox 2.0</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Firefox 3.0</td> 
      <td>Win 2k+/OSX.3+</td> 
      <td class="center">1.9</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Camino 1.0</td> 
      <td>OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Camino 1.5</td> 
      <td>OSX.3+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Netscape 7.2</td> 
      <td>Win 95+/Mac OS 8.6-9.2</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Netscape Browser 8</td> 
      <td>Win 98SE+</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Netscape Navigator 9</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.0</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.1</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.1</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.2</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.2</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.3</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.3</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.4</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.4</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.5</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.6</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.6</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.7</td> 
      <td>Win 98+/OSX.1+</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.8</td> 
      <td>Win 98+/OSX.1+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Seamonkey 1.1</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Epiphany 2.20</td> 
      <td>Gnome</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 1.2</td> 
      <td>OSX.3</td> 
      <td class="center">125.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 1.3</td> 
      <td>OSX.3</td> 
      <td class="center">312.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 2.0</td> 
      <td>OSX.4+</td> 
      <td class="center">419.3</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 3.0</td> 
      <td>OSX.4+</td> 
      <td class="center">522.1</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>OmniWeb 5.5</td> 
      <td>OSX.4+</td> 
      <td class="center">420</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>iPod Touch/iPhone</td> 
      <td>iPod</td> 
      <td class="center">420.1</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>S60</td> 
      <td>S60</td> 
      <td class="center">413</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 7.0</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 7.5</td> 
      <td>Win 95+/OSX.2+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 8.0</td> 
      <td>Win 95+/OSX.2+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 8.5</td> 
      <td>Win 95+/OSX.2+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 9.0</td> 
      <td>Win 95+/OSX.3+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 9.2</td> 
      <td>Win 88+/OSX.3+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 9.5</td> 
      <td>Win 88+/OSX.3+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera for Wii</td> 
      <td>Wii</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Nokia N800</td> 
      <td>N800</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Nintendo DS browser</td> 
      <td>Nintendo DS</td> 
      <td class="center">8.5</td> 
      <td class="center">C/A<sup>1</sup></td> 
     </tr> 
     <tr class="gradeC"> 
      <td>KHTML</td> 
      <td>Konqureror 3.1</td> 
      <td>KDE 3.1</td> 
      <td class="center">3.1</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>KHTML</td> 
      <td>Konqureror 3.3</td> 
      <td>KDE 3.3</td> 
      <td class="center">3.3</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>KHTML</td> 
      <td>Konqureror 3.5</td> 
      <td>KDE 3.5</td> 
      <td class="center">3.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeX"> 
      <td>Tasman</td> 
      <td>Internet Explorer 4.5</td> 
      <td>Mac OS 8-9</td> 
      <td class="center">-</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Tasman</td> 
      <td>Internet Explorer 5.1</td> 
      <td>Mac OS 7.6-9</td> 
      <td class="center">1</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Tasman</td> 
      <td>Internet Explorer 5.2</td> 
      <td>Mac OS 8-X</td> 
      <td class="center">1</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Misc</td> 
      <td>NetFront 3.1</td> 
      <td>Embedded devices</td> 
      <td class="center">-</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Misc</td> 
      <td>NetFront 3.4</td> 
      <td>Embedded devices</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeX"> 
      <td>Misc</td> 
      <td>Dillo 0.8</td> 
      <td>Embedded devices</td> 
      <td class="center">-</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeX"> 
      <td>Misc</td> 
      <td>Links</td> 
      <td>Text only</td> 
      <td class="center">-</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeX"> 
      <td>Misc</td> 
      <td>Lynx</td> 
      <td>Text only</td> 
      <td class="center">-</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Misc</td> 
      <td>IE Mobile</td> 
      <td>Windows Mobile 6</td> 
      <td class="center">-</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Misc</td> 
      <td>PSP browser</td> 
      <td>PSP</td> 
      <td class="center">-</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeU"> 
      <td>Other browsers</td> 
      <td>All others</td> 
      <td>-</td> 
      <td class="center">-</td> 
      <td class="center">U</td> 
     </tr> 
    </tbody> 
</table>

источник

2017-02-03 Raduken

Еще одно решение, которое является для точного требования наличия внешнего фильтра

Fiddle link

$(document).ready(function() { 
var table = $('#example').DataTable(); 

$("#sel1").on('change',function() { 
$.fn.dataTable.ext.search.pop(); 
table.draw(); 
var filterItem=$(this).val() 
    $.fn.dataTable.ext.search.push(
     function(settings, data, dataIndex) { 

      return $(table.row(dataIndex).node()).children("td:first").text()==filterItem; 
     } 
    ); 
    table.draw(); 
}); 

$("#reset").click(function() { 
    $.fn.dataTable.ext.search.pop(); 
table.draw(); 
}); 

});

источник

2017-02-03 17:57:43

check Я добавил другое решение, которое соответствует вашему требованию –

спасибо, это то, что я ищу, как можно Dropbox работает без кнопки сброса? спасибо – Raduken

кнопка сброса предназначена для переноса всех данных в таблицу –

DataTables имеет встроенную функцию выпадающего фильтра, для получения дополнительной информации посетите Datatable Docs.

У вас также может быть фильтр для одного столбца.

Fiddle link для рабочего кода

Js Код

$(document).ready(function() { 
$('#example').DataTable({ 
    initComplete: function() { 
     this.api().columns().every(function() { 
      var column = this; 
      if(column[0]==0){ /* is the first column you want to have dropdown filter */ 
       var select = $('<select><option value=""></option></select>') 
       .appendTo($(column.header())) 
       .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>') 
       }); 
      } 
     }); 
    } 
}); 
});

источник

2017-02-03 10:50:57

спасибо за помощь, можно будет выбрать, чтобы быть вне стола? как я должен в образце? еще раз спасибо. – Raduken

@Raduken, если вы хотите иметь динамический источник данных через ajax-запрос. Тогда это один из возможных способов. –

DataTables главный фильтр раздаточной <select>

ответ

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