Datatables - Casella di ricerca fuori datatable

Sto usando DataTables ( datatables.net ) e vorrei che la mia casella di ricerca fosse fuori dalla tabella (ad esempio nel mio div di intestazione).

È possibile ?

È possibile utilizzare l'API DataTables per filtrare la tabella. Quindi tutto ciò di cui hai bisogno è il tuo campo di input con un evento keyup che attiva la funzione di filtro su DataTables. Con css o jquery puoi nascondere / rimuovere il campo di input di ricerca esistente. O forse DataTables ha un'impostazione per rimuoverlo / non includerlo.

Controlla la documentazione dell'API Datatables su questo.

Esempio:

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

Come da commento @lvkz:

se stai usando datatable con d maiuscola .DataTable()(questo restituirà un oggetto API Datatable) usa questo:

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

che è la risposta di @netbrain.

se stai usando datatable con d minuscola .dataTable()(questo restituirà un oggetto jquery) usa questo:

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

Puoi usare l' sDomopzione per questo.

Predefinito con input di ricerca nel proprio div:

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

Se utilizzi jQuery UI ( bjQueryUIimpostato su true):

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

Quanto sopra inserirà l' inputelemento di ricerca / filtro nel proprio divcon una classe denominata search-boxche è al di fuori della tabella effettiva.

Anche se usa la sua speciale sintassi abbreviata, può effettivamente accettare qualsiasi HTML che gli lanci.

Questo mi ha aiutato per DataTables versione 1.10.4, perché la sua nuova API

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

Le versioni più recenti hanno una sintassi diversa:

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

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

Si noti che questo esempio utilizza la variabile tableassegnata quando i dati vengono inizializzati per la prima volta. Se non hai questa variabile disponibile, usa semplicemente:

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

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

Da: DataTables 1.10

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

Questo dovrebbe funzionare per te: (DataTables 1.10.7)

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

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

o

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

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

Ho avuto lo stesso problema.

Ho provato tutte le alternative postate, ma nessun lavoro, ho usato un modo che non è giusto ma ha funzionato perfettamente.

Esempio di input di ricerca

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

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

Voglio aggiungere un'altra cosa alla risposta di @ netbrain rilevante nel caso in cui utilizzi l'elaborazione lato server (vedi l' opzione serverSide ).

La limitazione delle query eseguita per impostazione predefinita dai datatables (vedere l' opzione searchDelay ) non si applica alla .search()chiamata API. Puoi recuperarlo usando $ .fn.dataTable.util.throttle () nel modo seguente:

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

Puoi spostare il div quando la tabella viene disegnata usando la fnDrawCallbackfunzione.

    $("#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 loadtransajax.phppotresti ricevere il valore get:

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

Se stai usando JQuery dataTable, devi solo aggiungere "bFilter":true. Questo mostrerà la casella di ricerca predefinita fuori dalla tabella e funzionerà in modo dinamico .. come previsto

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