Datatables - Kotak Pencarian di luar datatable

Saya menggunakan DataTables ( datatables.net ) dan saya ingin kotak pencarian saya berada di luar tabel (misalnya di div header saya).

Apakah ini mungkin?

Anda dapat menggunakan api DataTables untuk memfilter tabel. Jadi yang Anda butuhkan hanyalah kolom input Anda sendiri dengan peristiwa keyup yang memicu fungsi filter ke DataTables. Dengan css atau jquery Anda dapat menyembunyikan / menghapus field input pencarian yang ada. Atau mungkin DataTables memiliki pengaturan untuk menghapus / tidak menyertakannya.

Lihat dokumentasi API Datatables tentang ini.

Contoh:

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

Sesuai komentar @lvkz:

jika Anda menggunakan datatable dengan huruf besar d .DataTable()(ini akan mengembalikan objek API Datatable) gunakan ini:

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

yang merupakan jawaban @netbrain.

jika Anda menggunakan datatable dengan huruf kecil d .dataTable()(ini akan mengembalikan objek jquery) gunakan ini:

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

Anda dapat menggunakan sDomopsi untuk ini.

Default dengan input pencarian di div-nya sendiri:

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

Jika Anda menggunakan jQuery UI ( bjQueryUIdiatur ke true):

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

Di atas akan menempatkan elemen pencarian / pemfilteran inputke dalamnya sendiri divdengan kelas bernama search-boxyang berada di luar tabel sebenarnya.

Meskipun menggunakan sintaks singkat khusus, ia benar-benar dapat mengambil HTML apa pun yang Anda lemparkan.

Yang ini membantu saya untuk DataTables Versi 1.10.4, karena API barunya

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

Versi yang lebih baru memiliki sintaks yang berbeda:

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

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

Perhatikan bahwa contoh ini menggunakan variabel yang tableditetapkan saat datatables pertama kali diinisialisasi. Jika Anda tidak memiliki variabel ini tersedia, cukup gunakan:

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

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

Sejak: DataTables 1.10

- Sumber: https://datatables.net/reference/api/search ()

Ini harus bekerja untuk Anda: (DataTables 1.10.7)

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

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

atau

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

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

Saya memiliki masalah yang sama.

Saya mencoba semua alternatif yang diposting, tetapi tidak berhasil, saya menggunakan cara yang tidak benar tetapi berfungsi dengan sempurna.

Contoh masukan pencarian

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

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

Saya ingin menambahkan satu hal lagi ke jawaban @ netbrain yang relevan jika Anda menggunakan pemrosesan sisi server (lihat opsi serverSide ).

Query throttling yang dilakukan secara default oleh datatables (lihat opsi searchDelay ) tidak berlaku untuk .search()panggilan API. Anda bisa mendapatkannya kembali dengan menggunakan $ .fn.dataTable.util.throttle () dengan cara berikut:

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

Anda bisa memindahkan div saat tabel digambar menggunakan fnDrawCallbackfungsi tersebut.

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

Dalam loadtransajax.phpAnda mungkin menerima nilai get:

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

Jika Anda menggunakan JQuery dataTable jadi Anda hanya perlu menambahkan "bFilter":true. Ini akan menampilkan kotak pencarian default di luar tabel dan bekerja secara dinamis..seperti yang diharapkan

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