DataTables ( datatables.net )를 사용하고 있으며 검색 상자가 테이블 외부에 있기를 원합니다 (예 : 헤더 div).
이게 가능해 ?
답변
DataTables API를 사용하여 테이블을 필터링 할 수 있습니다. 따라서 필요한 것은 DataTables에 대한 필터 기능을 트리거하는 keyup 이벤트가있는 자체 입력 필드입니다. css 또는 jquery를 사용하여 기존 검색 입력 필드를 숨기거나 제거 할 수 있습니다. 또는 DataTables에 제거 / 포함하지 않는 설정이있을 수 있습니다.
이에 대한 Datatables API 문서를 확인하세요.
예:
HTML
<input type="text" id="myInputTextField">
JS
oTable = $('#myTable').DataTable(); //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
oTable.search($(this).val()).draw() ;
})
답변
@lvkz 댓글에 따라 :
대문자 d와 함께 datatable을 사용하는 경우 .DataTable()
(Datatable API 객체를 반환합니다) 다음을 사용하십시오.
oTable.search($(this).val()).draw() ;
@netbrain 대답입니다.
소문자 d로 datatable을 사용하는 경우 .dataTable()
(jquery 객체를 반환합니다) 다음을 사용하십시오.
oTable.fnFilter($(this).val());
답변
이를 위해 sDom
옵션을 사용할 수 있습니다 .
자체 div에 검색 입력이있는 기본값 :
sDom: '<"search-box"r>lftip'
jQuery UI를 사용하는 경우 (로 bjQueryUI
설정 true
) :
sDom: '<"search-box"r><"H"lf>t<"F"ip>'
위의 내용은 검색 / 필터링 input
요소를 자신 div
의 클래스에 넣을 것 입니다.search-box
의 내용은 실제 테이블 외부에있는 이 합니다.
특수한 속기 구문을 사용하더라도 실제로 던지는 모든 HTML을 사용할 수 있습니다.
답변
이것은 새로운 API가 있기 때문에 DataTables 버전 1.10.4에서 나를 도왔습니다.
var oTable = $('#myTable').DataTable();
$('#myInputTextField').keyup(function(){
oTable.search( $(this).val() ).draw();
})
답변
최신 버전은 구문이 다릅니다.
var table = $('#example').DataTable();
// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
table.search(this.value).draw();
});
이 예제는 table
datatables가 처음 초기화 될 때 할당 된 변수를 사용합니다 . 이 변수를 사용할 수없는 경우 다음을 사용하십시오.
var table = $('#example').dataTable().api();
// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
table.search(this.value).draw();
});
이후 : DataTables 1.10
답변
이것은 당신을 위해 일할 것입니다. (DataTables 1.10.7)
oTable = $('#myTable').dataTable();
$('#myInputTextField').on('keyup change', function(){
oTable.api().search($(this).val()).draw();
})
또는
oTable = $('#myTable').DataTable();
$('#myInputTextField').on('keyup change', function(){
oTable.search($(this).val()).draw();
})
답변
나는 같은 문제가 있었다.
게시 된 모든 대안을 시도했지만 작업이 없었고 옳지 않은 방식을 사용했지만 완벽하게 작동했습니다.
검색 입력 예
<input id="serachInput" type="text">
jquery 코드
$('#listingData').dataTable({
responsive: true,
"bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input
$("#serachInput").on("input", function (e) {
e.preventDefault();
$('#listingData').DataTable().search($(this).val()).draw();
});
