데이터 테이블 - 데이터 테이블 외부의 검색 상자

데이터 테이블 - 데이터 테이블 외부의 검색 상자

DataTables(datatables.net )를 사용하고 있는데 검색 상자가 테이블 밖에 있으면 좋겠습니다(예: 헤더 div).

이것이 가능합니까?

DataTables API를 사용하여 테이블을 필터링할 수 있습니다.따라서 필요한 것은 데이터 테이블에 필터 기능을 트리거하는 키업 이벤트가 있는 자신의 입력 필드입니다.css 또는 jquery를 사용하면 기존 검색 입력 필드를 숨기거나 제거할 수 있습니다.또는 DataTables에 제거/포함하지 않는 설정이 있을 수 있습니다.

이에 대한 Datatables API 설명서를 확인하십시오.

예:

HTML

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

제이에스

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()개체를 합니다. (Datable API 개사다니)

 oTable.search($(this).val()).draw() ;

그것은 @netbrain 답변입니다.

소문자가 d인 데이터 테이블을 사용하는 경우.dataTable()을 사용합니다. (jquery 니다합반개사환체)

 oTable.fnFilter($(this).val());

이 옵션을 사용할 수 있습니다.

자체 div에 검색 입력이 있는 기본값:

sDom: '<"search-box"r>lftip'

jQuery UI를 사용하는 경우 (bjQueryUI로 설정한.true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

와 같이 하면 .input그 자체의 요소div라는 이름의 학급으로.search-box그것은 실제 테이블 밖에 있습니다.

그것은 특별한 속기 구문을 사용하지만 실제로 당신이 던지는 HTML을 취할 수 있습니다.

최신 버전 및 새 버전의 데이터 테이블의 경우 다음 단계를 수행해야 합니다.

1-searching옵션은 다음과 같아야 합니다.true.

2 - 기본 검색 입력을 숨깁니다.

.dataTables_filter {
    display: none;
}

3 - 새 검색 입력 추가:

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

4 - 검색 요청:

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

이것은 새로운 API 덕분에 DataTables Version 1.10.4에 도움이 되었습니다.

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

저도 같은 문제가 있었습니다.

나는 게시된 모든 대안을 시도했지만, 일은 없었고, 나는 옳지 않은 방법을 사용했지만 완벽하게 작동했습니다.

검색 입력 예제

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

재쿼리 부호

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#searchInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().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데이터 테이블이 처음 초기화될 때 할당됩니다.수 다음과 같이 간단히 하십시오.

var table = $('#example').dataTable().api();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

이후: 데이터 테이블 1.10

출처: https://datatables.net/reference/api/search()

저는 당신이 서버 측 처리를 사용하는 경우에 관련된 @netbrain의 답변에 한 가지 더 추가하고 싶습니다(serverSide 옵션 참조).

데이터 테이블에 의해 기본적으로 수행되는 쿼리 조절(searchDelay 옵션 참조)은.search()API 호출.다음과 같은 방법으로 $.fn.dataTable.util.throttle()을 사용하여 데이터를 되찾을 수 있습니다.

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});

이것은 당신에게 도움이 될 것입니다: (데이터 표 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();
})

테이블이 그려질 때 Div를 이동할 수 있습니다.fnDrawCallback기능.

    $("#myTable").dataTable({
    "fnDrawCallback": function (oSettings) {
        $(".dataTables_filter").each(function () {
            $(this).appendTo($(this).parent().siblings(".panel-body"));
        });
    }
});

$('#example').DataTable({
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": "../admin/ajax/loadtransajax.php",
   "fnServerParams": function (aoData) {
        // Initialize your variables here
        // I have assign the textbox value for "text_min_val"
        var min_val = $("#min").val();  //push to the aoData
        aoData.push({name: "text_min_val", value:min_val});
   },
   "fnCreatedRow": function (nRow, aData, iDataIndex) {
       $(nRow).attr('id', 'tr_' + aData[0]);
       $(nRow).attr('name', 'tr_' + aData[0]);
       $(nRow).attr('min', 'tr_' + aData[0]); 
       $(nRow).attr('max', 'tr_' + aData[0]); 
   }
});

인loadtransajax.phpget 값을 받을 수 있습니다.

if ($_GET['text_min_val']){
    $sWhere = "WHERE ("; 
    $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
    $sWhere .= ')';
}

JQuery dataTable을 사용하는 경우 다음을 추가하면 됩니다."bFilter":true테이블 외부에 기본 검색 상자가 표시되고 동적으로 작동합니다.예상대로

$("#archivedAssignments").dataTable({
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "sPageFirst": false,
                "sPageLast": false,
                "oLanguage": {
                "oPaginate": {
                    "sPrevious": "<< previous",
                    "sNext" : "Next >>",
                    "sFirst": "<<",
                    "sLast": ">>"
                    }
                },
            "bJQueryUI": false,
            "bLengthChange": false,
            "bInfo":false,
            "bSortable":true
        });    

언급URL : https://stackoverflow.com/questions/5990386/datatables-search-box-outside-datatable