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


Respuestas:


240

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

8
Definitivamente debería usar .keyup en lugar de .keypress, de lo contrario experimentará un retraso en los resultados
Sævar

1
Me metí $(".dataTables_filter :input").focus().val(value).keypress();en poner en keyupmi entrada durante aproximadamente una hora, antes de encontrar esto. Nunca pensé en usar la API .. ¡Solución elegante!
MattSizzle

3
El JS debe cambiar para usar .search ($ (this) .val ()) .draw () en lugar de fnFilter. Ver: datatables.net/manual/api#Chaining Cambié esta respuesta para solucionarlo, pero parece que primero debe ser revisado por pares.
Shane Grant

13
Observación: todavía necesitará la opción "buscar: verdadero", y luego probablemente desee ocultar el cuadro de búsqueda predeterminado, así que simplemente establezca la opción sDOM en nulo.
bang

8
Crear una instancia de $ (). DataTable () con una "d" pequeña devolverá un objeto jQuery en lugar de una instancia de API de DataTables. Esto último se puede lograr llamando a "oTable = $ ('# myTable'). DataTable ();" con una "D" mayúscula. Esto es necesario para poder llamar a .search en él (de lo contrario, arrojará un error de "función no definida"). Ver: datatables.net/faqs/#api
Lionel

34

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

4
oTable.fnFilter($(this).val());A mí también me
funcionó

10
Ambos métodos son válidos, dependiendo de cómo llame a la tabla de datos: `oTable.search ($ (this) .val ()). Draw ();` que usa cuando lo llama: .DataTable()y este: oTable.fnFilter($(this).val());cuando usa .dataTable() La diferencia está en la capital D. ¡Espero que te ayude!
Lvkz

Da un error "oTable.fnFilter no es una función" para las tablas de datos versión 1.10.5
Ege Bayrak

Simplemente pensé que con jQuery también puede acceder a la API de base de datos de esta manera: oTable.api().search($(this).val()).draw();puede ser útil, especialmente si también desea control manual sobre la paginación length:oTable.api().page.len($(this).val()).draw();
Ghis

15

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.


@Marcus: de hecho, siento que sDom no es muy elegante de usar, deje de lado el hecho de que no podemos personalizar completamente el cuadro de búsqueda (hay un texto "Buscar" en código duro en ese cuadro).
Hoàng Long

pero todavía está dentro de div.datatables_Wrapper, ¿alguna forma de moverlo fuera de él también?
Artur79

@ Artur79 Lamentablemente no. No sin hackear la fuente de Datatables, al menos.
mekwall

2
<333 esta sintaxis '<"search-box"r><"H"lf>t<"F"ip>'no estoy seguro de si existe algo peor
Cristian E.

@ HoàngLong, de hecho, puede personalizar el cuadro de búsqueda con opciones como esta:language: { search: "example", searchPlaceholder: "example" }
Flimm

8

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

Tenga en cuenta la "D" mayúscula de "var oTable = $ ('# myTable'). DataTable ();" ( datatables.net/faqs/#api )
Lionel

6

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


4

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

4

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

4

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

1

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

O si usa una versión más reciente de la tabla de datos, tendrá:"drawCallback": function (settings) { $(".dataTables_filter").each(function () { $(this).appendTo($(this).parent().siblings(".panel-body")); }); },
Daniel Dudas

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

0

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

La cuestión era cambiar la posición de lo creado dinámicamente. Poniéndolo FUERA de la mesa
MC
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.