Datentabellen - 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 verwenden, um die Tabelle zu filtern. Sie benötigen 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 DataTables hat eine Einstellung zum Entfernen / Nichteinschließen.

Überprüfen Sie hierzu die Dokumentation zur Datatables-API.

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

Gemäß @ lvkz Kommentar:

Wenn Sie datatable mit Großbuchstaben d verwenden .DataTable()(dies gibt ein Datatable API-Objekt zurück), verwenden Sie Folgendes:

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

Das ist @netbrain Antwort.

Wenn Sie datatable mit Kleinbuchstaben d verwenden .dataTable()(dies gibt ein jquery-Objekt zurück), verwenden Sie Folgendes:

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

Sie können die sDomOption hierfür verwenden.

Standard mit Sucheingabe in einem eigenen div:

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

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

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

Mit dem obigen Befehl wird das Such- / Filterelement mit einer Klasse namens außerhalb der eigentlichen Tabelle inputin ein eigenes Element eingefügt.divsearch-box

Obwohl es seine spezielle Kurzschrift-Syntax verwendet, kann es tatsächlich jeden HTML-Code verwenden, den Sie darauf werfen.

Dieser hat mir bei DataTables Version 1.10.4 geholfen, weil es eine neue API gibt

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

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 verwendet wird, die tablebeim ersten Initialisieren von Datentabellen zugewiesen wurde. 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: DataTables 1.10

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

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

Ich hatte das gleiche Problem.

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

Beispiel für eine 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();
});

Ich möchte der Antwort von @ netbrain noch etwas hinzufügen, das für den Fall relevant ist, dass Sie die serverseitige Verarbeitung verwenden (siehe serverSide) Option ).

Die standardmäßig von Datentabellen durchgeführte Drosselung von Abfragen (siehe Option searchDelay ) gilt nicht für den .search()API-Aufruf. Sie können es mit $ .fn.dataTable.util.throttle () auf folgende Weise zurückerhalten :

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

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

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

In erhalten loadtransajax.phpSie 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 .= ')';
}

Wenn Sie JQuery dataTable verwenden, müssen Sie nur hinzufügen "bFilter":true. Dies zeigt das Standardsuchfeld außerhalb der Tabelle an und funktioniert dynamisch. Wie erwartet

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