사이트의 모든 페이지에 대해 헤더의 데이터 테이블 검색 상자

Question

데이터 테이블을 검색 할 검색 상자를 만들려고합니다.

검색 상자는 사이트의 모든 페이지 헤더에 있습니다. 사용자가 검색 창에 입력 한 다음 제출하면 데이터 표를 쿼리합니다.

나는이 찾을 않았다

<input type="text" id="myInputTextField"> 

oTable = $('#myTable').dataTable(); 
$('#myInpuTextField').keypress(function(){ 
     oTable.fnFilter($(this).val()); 
}) 

하지만 검색 상자가 헤더에있을 것입니다으로 이것을 구현하는 방법을 확신 할 수 없었다.

도움이되는 조언을 보내 주시면 감사하겠습니다.

Answer 1

코드가 정확합니다. 그러나 모든 것은 설정에 따라 다릅니다. fnFilter는 검색 할 텍스트 인 필수 매개 변수 하나만 사용합니다. 두 번째 매개 변수를 지정하면 하나의 열만 필터링하고, 그렇지 않으면 모든 테이블의 텍스트를 검색합니다. 물론 여러 개의 표를 한 번에 필터링 할 수 있습니다.

//initialize table 1 
var oTable = $('#myTable').dataTable(); 
//initialize table 2 
var oTable2 = $('#myTable2').dataTable(); 
$('#myInpuTextField').keypress(function(){ 
     //filter table one 
     oTable.fnFilter($(this).val()); 
     //filter table two 
     oTable2.fnFilter($(this).val()); 
}) 

EDIT - 마지막 코멘트는 EDIT입니다. 그렇게하려면 양식을 사용하여 값을 서버에 게시해야합니다. 그러면 입력 필드에 게시 된 값을 미리로드하고 fnFilter를 호출합니다. 뭔가 (PHP에서)

<?php 
$postedSearch = $_POST['posted']; 
?> 
<script type="text/javascript"> 
$(function(){ 
    var oTable = $('#idOfTable').dataTable(); 
    if($('#myInputTextField').val() !== ''){ 
    oTable.fnFilter($('#myInputTextField').val()); 
    } 
}()) 
</script> 
<input type="text" id="myInputTextField" value="<?php echo $postedSearch ?>" />