2013-04-05 10 views
3

나는 AJAX 소스를 통해 데이터를 가져 오는 DataTables 테이블을 가지고 있습니다. 나는 테이블을 가동 시켜서 운영하고 심지어 검색 작업도한다.jQuery DataTables : 컬럼 당 필터

이제 모든 열에 검색 필드를 구현하라는 요청이 있습니다. 열 필터링을위한 DataTables Plugin이있는 것 같습니다.

<!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() 메소드를 첨부 :

이 내 HTML입니다. 콘솔에서도 오류가 발생하지는 않지만 테이블은 이전처럼 표시됩니다 (열을 검색 할 추가 입력 상자 없음).

내가 잘못 했나요? 그것은 소스 beeing 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. +에서 작동해야합니까? 플러그인의 데모 사이트는 2011-2012 년도에 Datatables 1.8 및 1.9만을 사용합니다. 나는 그것이 최신이 아니다라고하는 나쁜 감각을 가지고있다 :( –