it-swarm.com.de

Datatables - Suchfeld außerhalb der Datentabelle

Ich verwende DataTables ( datatables.net ) und möchte, dass sich mein Suchfeld außerhalb der Tabelle befindet (z. B. in meinem Header div).

Ist das möglich ?

Sie können die DataTables-API zum Filtern der Tabelle verwenden. Sie brauchen also nur ein eigenes Eingabefeld mit einem Keyup-Ereignis, das die Filterfunktion für DataTables auslöst. Mit css oder jquery können Sie das vorhandene Sucheingabefeld ausblenden/entfernen. Oder vielleicht hat DataTables eine Einstellung zum Entfernen/Nicht-Einschließen. 

Überprüfen Sie dazu die Datatables-API-Dokumentation.

Beispiel:

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

Wie in dem Kommentar von @lvkz: 

wenn Sie datatable mit Großbuchstaben verwenden, d .DataTable() (dies wird ein Datatable-API-Objekt zurückgeben), verwenden Sie Folgendes: 

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

das ist @netbrain Antwort. 

wenn Sie datatable mit Kleinbuchstaben verwenden, d .dataTable() (dies wird ein Jquery-Objekt zurückgeben), verwenden Sie Folgendes: 

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

Sie können dazu die Option sDom verwenden.

Standard mit Sucheingabe in einem eigenen div:

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

Wenn Sie die jQuery-Benutzeroberfläche verwenden (bjQueryUI auf true gesetzt):

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

Das obige wird das Such/Filterungselement input in seine eigene div mit einer Klasse namens search-box, die sich außerhalb der eigentlichen Tabelle befindet, einfügen.

Obwohl es seine spezielle Abkürzungssyntax verwendet, kann es tatsächlich jeden HTML-Code übernehmen, den Sie darauf werfen.

14
mekwall

Dieser hat mir bei der Version 1.10.4 von DataTables geholfen, da es eine neue API ist

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

Neuere Versionen haben eine andere Syntax:

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

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

Beachten Sie, dass in diesem Beispiel die Variable table verwendet wird, die bei der ersten Initialisierung von Datentypen zugewiesen wird. Wenn Sie diese Variable nicht zur Verfügung haben, verwenden Sie einfach:

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

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

Seit: Datentabellen 1.10

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

6
Jonny

Das sollte für Sie funktionieren: (DataTables 1.10.7)

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

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

oder

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

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

Ich möchte der Antwort von @ netbrain noch etwas hinzufügen, falls Sie die serverseitige Verarbeitung verwenden (siehe serverSide Option).

Die standardmäßig von Datentabellen durchgeführte Abfragedrosselung (siehe searchDelay Option) gilt nicht für den API-Aufruf .search(). Sie können es mit $. Fn.dataTable.util.throttle () wie folgt wiederherstellen:

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

Ich hatte das gleiche Problem.

Ich habe alle Alternativen ausprobiert, aber keine Arbeit, ich habe einen Weg gewählt, der nicht richtig ist, aber er hat perfekt funktioniert.

Beispiel für die Sucheingabe

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

der Jquery-Code

$('#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();
});
2
Bruno Ribeiro
$('#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]); 
   }
});

In loadtransajax.php erhalten Sie möglicherweise den get-Wert:

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

Sie können das div verschieben, wenn die Tabelle mit der Funktion fnDrawCallback gezeichnet wird.

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

Wenn Sie JQuery dataTable verwenden, müssen Sie einfach "bFilter":true hinzufügen. Dadurch wird das Standardsuchfeld außerhalb von Table und dessen Arbeiten dynamisch angezeigt 

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