Jquery 플러그인 DataTables 개별 열 필터링 맨 위?

Question

DataTables와 함께이 API를 사용합니다. http://www.sprymedia.co.uk/dataTables/example_multi_filter.html

그러나 "모든 열 검색"옆에 표 위에 입력을 넣을 수 있습니까 ??

Answer 1

당신은 CSS로 시도 할 수 :

tfoot { 
    display: table-header-group; 
} 

Answer 2

당신은 부가 DataTables에 대한 열 필터를 사용할 수 있습니다. 표제 행의 위와 아래에 필터를 배치하도록 구성 할 수 있습니다. http://jquery-datatables-column-filter.googlecode.com/svn/trunk/dateRange.html, http://jquery-datatables-column-filter.googlecode.com/svn/trunk/numberRange.html 및 사이트의 다른 예를 참조하십시오.

빠른 업데이트 : 위의 두 URL은 현재 유효하지 않습니다. 여기에 작동 하나있어 : https://code.google.com/archive/p/jquery-datatables-column-filter/

Answer 3

나는 아주 오래된 게시물입니다. 그러나 우리는 jQuery를 데이터 테이블에

$(document).ready(function() { 
$('#mytable thead td').each(function() { 
     var title = $('#mytable thead th').eq($(this).index()).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 
$("#mytable thead input").on('keyup change', function() { 
     table 
      .column($(this).parent().index()+':visible') 
      .search(this.value) 
      .draw(); 
}); 
}); 

Answer 4

넣고 열 위에 필터링 (OR 헤드 후) ... 당신의 jQuery 코드 변경 아래 수행하여이를 achive 수 있습니다

<script src="~/Scripts/DataTables/jquery.dataTables.columnFilter.js"></script> 

표

<table class="display table table-hover table-bordered" id="usersShops" width="100%"> 
    <thead> 
     <tr> 
      <th>Shop Name</th> 
      <th>User Name</th> 
      <th>Visit Date</th> 
      <th>IsVisited</th> 
      <th>IsAppdownloaded</th> 
     </tr> 
     <tr> 
      <th>ShopName</th> 
      <th>UserName</th> 
      <th>VisitDate</th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead>   
    <tbody></tbody> 
</table> 

수정 된 코드 열 필터 :

oTable.columnFilter({ 
       sPlaceHolder: "head:after", 
       aoColumns: [{ type: "text" }, 
          { type: "text" }, 
          { type: "date-range" } 
       ] 
      });