사용자 정의 내가 DataTable을 JQuery와의 검색 속성을 수정하려는 DataTable을 JQuery와

Question

를 "검색"https://datatables.net/examples/api/multi_filter.html DataTable의 맨 아래에 몇 가지 입력 텍스트 필드는 그들 각각의 필터입니다있다 해당 열.

내가 얻고 자하는 것은 다른 레이아웃을 사용하여 입력 텍스트 필드로 내 양식을 만들고 싶기 때문에 DataTable에서 입력 텍스트 필드를 꺼내는 것입니다.

$('#example tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 

할 수 있습니다 : (나는 내 ​​양식에 더 많은 활력을주는 "검색 중"속성의 빠른 응답을 활용하고자는)

내가 생각하는 예제 코드의이 부분이 있다는 것입니다 제가 파악 해달라고하면 코드

table.columns().every(function() { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() { 
      if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 

의이 부분을 수정하는 방법입니다

<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 
<input type="text" placeholder="Search " class="test" /> 

그러나 : 웹 페이지의 다른 곳에서 내 자신의 간단한 HTML 입력 텍스트 필드에 대한 대체 경고 문 내 자신의 입력 텍스트 필드 및 디버깅에 몇 가지 테스트 후

$('input.test').on('keyup change', function() { alert('inside') 

: 16,

나는 내 자신의 입력 텍스트 필드를 사용하려고, 그래서 나는 줄 대체 :

$('input', this.footer()).on('keyup change', function() { 

작성자 나는이 함수가 모든 "test"클래스를 가지고 있기 때문에 많은 입력 텍스트 필드가 존재하는만큼 많은 것을 실행한다는 것을 깨달았다. 그러나 어떤 식 으로든,이 "검색"속성은이 입력 텍스트 필드에서 작동하지 않습니다.

내 목표를 달성하기 위해이 DataTable을 수정하는 적절한 방법에 대한 정보를 얻을 수 있습니까?

Answer 1

input이 특정 열에 연결되도록 만들 수 있습니다. .

<input id="column_3_search" type="text" placeholder="Search " class="test" /> 

JS : 즉, 단지 당신이

HTML 지정 열 필터링 것입니다 VAR 테이블 = $ ('# 예')의 DataTable을();

$('#column_3_search').on('keyup', function() { 
    table 
     .columns(3) 
     .search(this.value) 
     .draw(); 
}); 

이 텍스트가 감사