Datatables - Hộp tìm kiếm bên ngoài dữ liệu

Tôi đang sử dụng DataTables ( datatables.net ) và tôi muốn hộp tìm kiếm của mình nằm ngoài bảng (ví dụ: trong div tiêu đề của tôi).

Điều này có khả thi không?

Bạn có thể sử dụng api DataTables để lọc bảng. Vì vậy, tất cả những gì bạn cần là trường đầu vào của riêng bạn với một sự kiện keyup kích hoạt chức năng lọc thành DataTables. Với css hoặc jquery, bạn có thể ẩn / xóa trường nhập tìm kiếm hiện có. Hoặc có thể DataTables có cài đặt để loại bỏ / không bao gồm nó.

Kiểm tra tài liệu API Datatables về điều này.

Thí dụ:

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() ;
})

Theo nhận xét của @lvkz:

nếu bạn đang sử dụng .DataTable()Datatable với chữ hoa d (điều này sẽ trả về một đối tượng Datatable API), hãy sử dụng:

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

đó là câu trả lời @netbrain.

nếu bạn đang sử dụng datatable với chữ thường d .dataTable()(điều này sẽ trả về một đối tượng jquery), hãy sử dụng:

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

Bạn có thể sử dụng sDomtùy chọn này.

Mặc định với đầu vào tìm kiếm trong div riêng của nó:

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

Nếu bạn sử dụng giao diện người dùng jQuery ( bjQueryUIđược đặt thành true):

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

Ở trên sẽ đặt inputphần tử tìm kiếm / lọc vào riêng của nó divvới một lớp có tên search-boxnằm ngoài bảng thực tế.

Mặc dù nó sử dụng cú pháp viết tắt đặc biệt, nó thực sự có thể lấy bất kỳ HTML nào bạn ném vào nó.

Cái này đã giúp tôi cho DataTables Phiên bản 1.10.4, vì API mới của nó

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

Các phiên bản mới hơn có cú pháp khác:

var table = $('#example').DataTable();

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

Lưu ý rằng ví dụ này sử dụng biến tableđược gán khi các dữ liệu được khởi tạo lần đầu tiên. Nếu bạn không có sẵn biến này, chỉ cần sử dụng:

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

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

Kể từ: DataTables 1.10

- Nguồn: https://datatables.net/reference/api/search ()

Điều này sẽ phù hợp với bạn: (DataTables 1.10.7)

oTable = $('#myTable').dataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.api().search($(this).val()).draw();
})

hoặc là

oTable = $('#myTable').DataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.search($(this).val()).draw();
})

Tôi đã từng gặp vấn đề tương tự.

Tôi đã thử tất cả các lựa chọn thay thế được đăng, nhưng không có tác dụng, tôi đã sử dụng một cách không đúng nhưng nó hoạt động hoàn hảo.

Đầu vào tìm kiếm mẫu

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

mã 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();
});

Tôi muốn thêm một điều nữa vào câu trả lời của @ netbrain có liên quan trong trường hợp bạn sử dụng xử lý phía máy chủ (xem tùy chọn serverSide ).

Điều chỉnh truy vấn được thực hiện theo mặc định bởi các tệp dữ liệu (xem tùy chọn searchDelay ) không áp dụng cho lệnh .search()gọi API. Bạn có thể lấy lại bằng cách sử dụng $ .fn.dataTable.util.throttle () theo cách sau:

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);
});

Bạn có thể di chuyển div khi bảng được vẽ bằng fnDrawCallbackhàm.

    $("#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]); 
   }
});

Trong loadtransajax.phpbạn có thể nhận được giá trị nhận được:

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

Nếu bạn đang sử dụng JQuery dataTable, bạn chỉ cần thêm vào "bFilter":true. Điều này sẽ hiển thị hộp tìm kiếm mặc định bên ngoài bảng và nó hoạt động động..như mong đợi

$("#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
        });