2013-04-05 2 views
3

У меня есть таблица DataTables, которая получает данные через источник AJAX. У меня есть таблица и работает, даже поиск работает.jQuery DataTables: фильтр за столбец

Теперь у меня есть запрос на реализацию полей поиска для каждого столбца. Кажется, есть плагин DataTables для фильтрации столбцов, который я пытался использовать.

Это мой HTML:

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>testpage</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="http://www.company.com/content/dam/workflows/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#overview").dataTable({ 
      aoColumnDefs:[{ 
       aTargets: [0] 
      }], 
      bAutoWidth: false, 
      bLengthChange: false, 
      iDisplayLength: 10, 
      sAjaxSource: "http://server/api.jsp?someparameters" 
     }).columnFilter(); 
    }) 
    </script> 
</head> 

<body> 

<table id="overview"> 
<tr> 
    <thead> 
     <th>#</th> 
     <th>Betrieb</th> 
     <th>Status</th> 
     <th>Anlagenummer</th> 
     <th>Bezeichnung</th> 
    </thead> 
</tr> 
</table> 

</body> 
</html> 

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

Я что-то не так? Возможно ли это из-за источника AJAX?

+0

Где '' тег? – asprin

+0

Ой, мой ... Не могу поверить, что я этого не видел, спасибо большое! – Ahatius

ответ

2

Я думаю, вам нужно определить раздел нижнего колонтитула в таблице html. Взгляните на this example

таблица должна выглядеть

<table> 
    <thead> 
     <tr>...</tr> 
    </thead> 
    <tfoot> 
     <tr>...</tr> 
    </tfoot> 
</table> 
+0

Спасибо, приятель, это было именно то, что вызывало проблему! – Ahatius

+0

Я не мог заставить это работать с DataTables 1.10.2. Должно ли оно работать с 1.10. +? Демо-сайт плагина использует только Datatables 1.8 и 1.9 с 2011-2012 годов. У меня плохое чувство, что это не актуально :( –

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