Datatables - Kotak Pencarian di luar datatable

117

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

Apakah ini mungkin?

Athanasios Emmanouilidis
sumber

Jawaban:

240

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() ;
})
netbrain
sumber
8
Anda pasti harus menggunakan .keyup daripada .keypress, jika tidak, Anda akan mengalami penundaan dalam hasil
Sævar
1
Aku mengacaukan dengan menempatkan $(".dataTables_filter :input").focus().val(value).keypress();di keyupatas masukan saya selama sekitar satu jam, sebelum menemukan ini. Jangan pernah menggunakan API .. Solusi elegan!
MattSizzle
3
JS perlu diubah untuk menggunakan .search ($ (this) .val ()) .draw () sebagai pengganti fnFilter. Lihat: datatables.net/manual/api#Chaining Saya mengubah jawaban ini untuk memperbaikinya, tetapi tampaknya perlu ditinjau sejawat terlebih dahulu.
Shane Grant
13
Catatan: Anda masih memerlukan opsi "mencari: benar", dan kemudian Anda mungkin ingin menyembunyikan kotak pencarian default jadi setel opsi sDOM ke null.
dentuman
8
Membuat instance $ (). DataTable () dengan "d" kecil akan mengembalikan objek jQuery daripada instance API DataTables. Yang terakhir dapat dicapai dengan memanggil "oTable = $ ('# myTable'). DataTable ();" dengan huruf besar "D". Ini diperlukan agar dapat memanggil .search di atasnya (jika sebaliknya akan memunculkan kesalahan "fungsi tidak ditentukan"). Lihat: datatables.net/faqs/#api
Lionel
34

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());
zizoujab
sumber
4
oTable.fnFilter($(this).val());Bekerja untuk saya juga,
shabeer90
10
Kedua metode tersebut valid, bergantung pada bagaimana Anda memanggil datatable: `oTable.search ($ (this) .val ()). Draw ();` yang Anda gunakan saat Anda memanggilnya: .DataTable()dan yang ini: oTable.fnFilter($(this).val());saat Anda menggunakan .dataTable() The difference berada di ibukota D. Semoga membantu!
Lvkz
Memberikan kesalahan "oTable.fnFilter bukan fungsi" untuk datatables versi 1.10.5
Ege Bayrak
Bayangkan saja bahwa dengan jQuery Anda juga dapat mengakses API Database seperti ini: oTable.api().search($(this).val()).draw();Ini dapat berguna, terutama jika Anda ingin kontrol manual atas pagination lengthjuga:oTable.api().page.len($(this).val()).draw();
Ghis
15

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.

mekwall.dll
sumber
@Marcus: sebenarnya saya merasa bahwa sDom tidak cukup elegan untuk digunakan, kesampingkan fakta bahwa kami tidak dapat sepenuhnya menyesuaikan kotak pencarian (ada teks "Pencarian" dengan kode keras di kotak itu).
Hoàng Long
tapi itu masih di dalam div.datatables_Wrapper, ada cara untuk memindahkannya ke luar juga?
Artur79
@ Artur79 Sayangnya tidak. Setidaknya, bukan tanpa meretas sumber Dataable.
mekwall
2
<333 sintaks ini '<"search-box"r><"H"lf>t<"F"ip>'tidak yakin apakah ada sesuatu yang lebih buruk
Cristian E.
@ HoàngLong Anda sebenarnya dapat menyesuaikan kotak telusur menggunakan opsi seperti ini:language: { search: "example", searchPlaceholder: "example" }
Flimm
8

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();
})
kayu manis
sumber
Perhatikan huruf besar "D" dari "var oTable = $ ('# myTable'). DataTable ();" ( datatables.net/faqs/#api )
Lionel
6

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

Jonny
sumber
4

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();
})
Sky Yip
sumber
4

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();
});
Bruno Ribeiro
sumber
4

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);
});
citxx
sumber
1

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"));
        });
    }
});
surut
sumber
Atau jika Anda menggunakan versi terbaru dari dataTable Anda akan memiliki:"drawCallback": function (settings) { $(".dataTables_filter").each(function () { $(this).appendTo($(this).parent().siblings(".panel-body")); }); },
Daniel Dudas
1
$('#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 .= ')';
}
Senanayaka
sumber
0

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
        });    
Nikhil Thombare
sumber
Pertanyaannya adalah mengubah posisi yang diciptakan secara dinamis. Menempatkannya DI LUAR meja
MC