Datatable'lar - Datatable dışında Arama Kutusu

DataTables ( datatables.net ) kullanıyorum ve arama kutumun tablonun dışında olmasını istiyorum (örneğin başlık divimde).

Mümkün mü ?

Tabloyu filtrelemek için DataTables api'sini kullanabilirsiniz. Dolayısıyla, ihtiyacınız olan tek şey, DataTables'a filtre işlevini tetikleyen bir keyup olayına sahip kendi giriş alanınızdır. Css veya jquery ile mevcut arama giriş alanını gizleyebilir / kaldırabilirsiniz. Ya da DataTables'ın onu kaldırmak / dahil etmemek için bir ayarı vardır.

Bununla ilgili Datatables API belgelerine göz atın.

Misal:

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 yorumuna göre:

d büyük harfli datatable kullanıyorsanız .DataTable()(bu bir Datatable API nesnesi döndürür) şunu kullanın:

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

@netbrain cevabı.

d küçük harfli datatable kullanıyorsanız .dataTable()(bu bir jquery nesnesi döndürür) şunu kullanın:

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

Bunun için sDomseçeneği kullanabilirsiniz .

Kendi bölmesinde arama girişi ile varsayılan:

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

JQuery UI kullanıyorsanız (olarak bjQueryUIayarlayın true):

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

Yukarıdakiler, arama / filtreleme inputelemanını , gerçek tablonun dışında olan divbir sınıfla kendi içine koyacaktır search-box.

Özel kısaltma sözdizimini kullanmasına rağmen, attığınız herhangi bir HTML'yi gerçekten alabilir.

Bu, DataTables Sürüm 1.10.4 için bana yardımcı oldu, çünkü yeni API

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

Daha yeni sürümlerin farklı bir sözdizimi vardır:

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

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

Bu örnekte, tableveriler ilk kez başlatıldığında atanan değişkeni kullandığına dikkat edin . Bu değişkene sahip değilseniz, basitçe kullanın:

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

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

Beri: DataTables 1.10

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

Bu sizin için çalışmalıdır: (DataTables 1.10.7)

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

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

veya

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

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

Ben de aynı sorunu yaşadım.

Gönderilen tüm alternatifleri denedim ama iş yok, doğru olmayan bir yol kullandım ama mükemmel çalıştı.

Örnek arama girişi

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

jquery kodu

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

Sunucu tarafı işlemeyi kullanmanız durumunda @ netbrain'in cevabına bir şey daha eklemek istiyorum (bkz. ServerSide seçeneği).

Veri tabloları tarafından varsayılan olarak gerçekleştirilen sorgu azaltma (bkz. SearchDelay seçeneği), .search()API çağrısı için geçerli değildir . $ .Fn.dataTable.util.throttle () 'ı aşağıdaki şekilde kullanarak geri alabilirsiniz :

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

fnDrawCallbackFonksiyon kullanılarak tablo çizildiğinde div'i taşıyabilirsiniz .

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

İçinde loadtransajax.phpget değeri alabilirsiniz:

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

JQuery dataTable kullanıyorsanız, sadece eklemeniz gerekir "bFilter":true. Bu, tablo dışındaki varsayılan arama kutusunu ve çalışmalarını dinamik olarak gösterecektir .. beklendiği gibi

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