Datatables - Suchfeld außerhalb der Datentabelle

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

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.

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

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

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

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

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

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

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

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