: 입력 필드에서 다중 기준 연구

Question

나는 DataTable을 사용하고 있는데 나는 데이터 테이블

내 HTML 관련이없는 HTML 입력에서 표에 검색 할 수있는 :

<div id="general> 
<input type="text" id="name"/> 
<input type="text" id="lastname"/> 
<input type="text" id="birthday"/> 
<table id="table-search" class="display col-sm-4"> 
    <thead> 
    <tr> 
    <th>name</th> 
    <th>lastname</th> 
    <th>birthday</th> 
    <th>blah</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>john</td> 
     <td>doe</td> 
     <td>1970/1/1</td> 
     <td>bla bla</td> 
     <td>johnny</td> 
     <td>doenut</td> 
     <td>1970/1/1</td> 
     <td>bla bla</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

|john|doe 
    |johnny|doenut 

내가 ma에 : 내가 lastname 입력에 name 입력 + doe에 john를 넣어 경우, 나는 결과를 갖고 싶어 fnFilter()으로 테이블을 검색 할 수는 없지만 다음과 같은 연구는 수행 할 수 없습니다. value1 AND value2 AND value3. 이전 valueX 결과가 삭제됩니다.

$('.general input').keyup(function() { 
    var name = $('#name').val(); 
    var lastname = $('#lastname').val(); 
    var birthday = $('#birthday').val(); 

     oTable.fnFilter(name+lastname+birthday); <-- i want a request like this 


    }) 

Answer 1

당신은 $.fn.dataTable.ext.search.push();를 사용 DataTables에 사용자 정의 필터를 추가,하지만 당신의 모든 필터를 전달할 수 있습니다. 당신이 그것을 볼 때 더 의미가 있습니다. 예를 들면 다음과 같습니다.

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) { 
    var filterFirstName = $('#name').val(); 
    if(filterFirstName == '') { return true; } 
    return data[0].indexOf(filterFirstName) != -1; 
    }, 
    function(settings, data, dataIndex) { 
    var filterLastName = $('#lastname').val(); 
    if(filterLastName == '') { return true; } 
    return data[1].indexOf(filterLastName) != -1; 
    } 
); 

해당 코드는 이름과 마지막에 각각 두 개의 필터를 추가합니다. 먼저 두 개의 필터 입력 값을 얻었는지 확인할 수 있습니다. 아무것도 설정하지 않으면 true를 반환합니다 (모든 필터가 표시된 행에 대해 true로 전달되면 표시됩니다. 그렇지 않으면 숨겨집니다). 필터에 값이 있으면 해당 열의 값과 비교할 수 있습니다 (data 여기에 현재 행의 데이터 배열 - 0은 이름 열의 위치이고 1은 성 기둥). 값이 일치하지 않으면 false를 반환하고 (열을 숨 깁니다) true이면 true를 반환합니다 (모든 필터가 true이면 행이 표시됨).

그런 다음 당신은 단순히 입력에 대해 keyup에 테이블을 다시 그릴 필요가 :

$('#general input').keyup(function() { 
    oTable.draw(); 
}); 

현재 데이터와 행동에서 볼 수 있습니다 : https://jsfiddle.net/v7okphu3/