Datatables - Cuadro de búsqueda fuera de la tabla de datos

Question

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

¿Esto es posible?

Answer 1

Puede usar la API DataTables para filtrar la tabla. Entonces, todo lo que necesita es su propio campo de entrada con un evento de activación 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 eliminar/no incluirlo.

Consulte la documentación de la API 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() ; 
}) 

Answer 2

Usted puede utilizar la opción sDom para esto.

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

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

Si utiliza jQuery UI (bjQueryUI conjunto de true):

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

Lo anterior poner la búsqueda/filtrando el elemento input en su propio div con una clase llamada search-box que está fuera de la tabla actual .

Aunque utiliza su sintaxis abreviada especial, puede tomar cualquier HTML que le arroje.

Answer 3

Puede mover el div cuando la tabla se dibuja utilizando la función fnDrawCallback.

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

Answer 4

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

Answer 5

Según comentario @lvkz:

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

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

que es @n respuesta etbrain.

si está utilizando tabla de datos con d minúscula .dataTable() (esto devolverá un objeto jQuery) usan este:

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

Answer 6

$('#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.php puede recibir el valor get:

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

Answer 7

Si está utilizando JQuery dataTable, solo tiene que agregar "bFilter":true. Esto mostrará la caja de búsqueda predeterminado mesa fuera y sus obras dynamically..as por esperada

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

Answer 8

Este trabajo debe ser para usted: (1.10.7) DataTables

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

Answer 9

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 table asignada cuando las tablas de datos se inicializan por primera vez. Si usted no tiene esta variable disponible, basta con utilizar:

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

Answer 10

que tenían el mismo problema.

Probé todas las alternativas publicadas, pero no funcionaba, utilicé una forma que no está bien pero funcionó perfectamente.

Ejemplo de búsqueda de código de entrada

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

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

Answer 11

quiero añadir una cosa más a la @netbrain's answer relevante en caso de que utilice el procesamiento del lado del servidor (ver serverSide opción).

La aceleración de consultas realizada de forma predeterminada por datatables (consulte la opción searchDelay) no se aplica a la llamada a la API .search(). Puede recuperarlo utilizando $.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); 
});