Tablas de datos: cuadro de búsqueda fuera de la tabla de datos

Estoy usando DataTables ( datatables.net ) y me gustaría que mi cuadro de búsqueda esté fuera de la tabla (por ejemplo, en mi div de encabezado).

Es posible ?

Puede usar la API de DataTables para filtrar la tabla. Entonces, todo lo que necesita es su propio campo de entrada con un evento de tecla que activa la función de filtro en DataTables. Con css o jquery puede ocultar / eliminar el campo de entrada de búsqueda existente. O tal vez DataTables tiene una configuración para eliminarlo / no incluirlo.

Consulte la documentación de la API de Datatables sobre esto.

Ejemplo:

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

Según el comentario de @lvkz:

si está utilizando datatable con d mayúscula .DataTable()(esto devolverá un objeto de API Datatable) use esto:

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

que es la respuesta de @netbrain.

si está usando datatable con d minúscula .dataTable()(esto devolverá un objeto jquery) use esto:

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

Puede usar la sDomopción para esto.

Por defecto con entrada de búsqueda en su propio div:

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

Si usa jQuery UI ( bjQueryUIconfigurado en true):

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

Lo anterior pondrá el inputelemento de búsqueda / filtrado en su propio nombre divcon una clase search-boxque está fuera de la tabla real.

A pesar de que usa su sintaxis abreviada especial, en realidad puede tomar cualquier HTML que le arrojes.

Este me ayudó para DataTables Versión 1.10.4, porque su nueva API

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

Las versiones más recientes tienen una sintaxis diferente:

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

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

Tenga en cuenta que este ejemplo utiliza la variable tableasignada cuando las tablas de datos se inicializan por primera vez. Si no tiene esta variable disponible, simplemente use:

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

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

Desde: DataTables 1.10

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

Esto debería funcionar para usted: (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();
})

Yo tuve el mismo problema.

Probé todas las alternativas publicadas, pero no funcionó, usé una forma que no es la correcta pero funcionó perfectamente.

Entrada de búsqueda de ejemplo

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

el código 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();
});

Quiero añadir una cosa más a la respuesta de @ NetBrain relevante en caso de que utilice el procesamiento del lado del servidor (ver ServerSide opción).

La limitación de consultas realizada de forma predeterminada por las tablas de datos (consulte la opción searchDelay ) no se aplica a la .search()llamada a la API. Puede recuperarlo usando $ .fn.dataTable.util.throttle () de la siguiente manera:

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

Puede mover el div cuando se dibuja la tabla usando la fnDrawCallbackfunción.

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

En loadtransajax.phppuede recibir el valor de obtener:

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

Si está utilizando JQuery dataTable, solo necesita agregar "bFilter":true. Esto mostrará el cuadro de búsqueda predeterminado fuera de la tabla y funcionará dinámicamente ... según lo esperado

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