트리거 DataTable을 강조하고 필터베이스

Question

설명

내가 가진 테이블 여기

<table id="account-table" class="table display nowrap" cellspacing="0" width="100%"> 
    <thead> 
    <tr class="text-left"> 
     <th>ID</th> 
     <th>Type</th> 
     <th>Name</th> 
     <th>Email Address</th> 
     <th>Action</th> 
    </tr> 
    </thead> 
</table> 

내 검색 입력 상자

<input type="text" class="form-control mb20" id="search" placeholder="Search"> 

---

시도

I입니다 이 설정을 시도했는데

**include** 

<script src="https://cdn.datatables.net/plug-ins/1.10.10/features/searchHighlight/dataTables.searchHighlight.min.js" type="text/javascript"></script> 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script> 



**settings** 

$('#account-table').DataTable({ 
    data: data, 
    deferRender: true, 
    paging: true, 
    searching: true, 
    bLengthChange : false, 
    Filter: false, 
    Info:false, 
    searchHighlight:true, 
    iDisplayLength: 10, 
}); 


**trigger the draw while typing** 

$('#search').keyup(function(){ 
    $('#account-table').search($(this).val()).draw(); 
}); 

검색 입력 상자를 입력 할 때 검색 기능이 작동하지 않는 이유가 확실하지 않습니다.

콘솔에 0 오류가 있습니다.

---

질문 더

어떻게에 대해 갈 것이라고 및 디버그이?

---

현재이 제안이 있습니다.

이 힌트/제안/도움은 매우 감사하겠습니다!

Answer 1

데이터 테이블은 테이블 위에 사용자를 생성하므로 검색 상자를 직접 만들 필요가 없습니다.

생성 된 전화 번호는 <input type="search" class="" placeholder="" aria-controls="account-table">입니까? 당신이 당신의 자신의 검색 상자를 사용해야하는 경우 JSFiddle

, 다음

$('#search').keyup(function(){ 
    $('#account-table').DataTable().search($(this).val()).draw(); 
}); 

이 아니었다 이유를 사용

여기에 모든 코드와 작업 필터 및 하이라이트와 JSFiddle있어 $('#account-table')은 해당 선택기와 일치하는 요소를 검색하여 jQuery의 결과를 반환하므로 DOM 요소에는 search이라는 함수가 없기 때문에 작동했습니다. .DataTable()을 호출하면 DataTable에서 해당 DOM 테이블을 생성 한 테이블 개체를 반환합니다.