Skip to main content
se eliminaron 15 caracteres en el cuerpo
Origen Enlace
César
  • 16.8k
  • 6
  • 42
  • 78

Una de las opciones que puedes realizar es la siguiente:
Crear

Crear tu propio input de búsqueda, escondes el de dataTable, y mediante el evento keyup Obtenerkeyup obtener el valor del input, darle el mismo formato que el del datasource y realizar la búsqueda.

Lo

Lo primero por realizar es esconder el input de dataTAbledataTable mediante CSS:
 

.dataTables_filter { display: none; }

tambiénTambién se puede desactivar mediante codigocódigo:

$('#example').DataTable({ searching: false });

Pero si realizas esto, no puedes realizar búsquedas, así que la mejor opción es esconderlo mediante CSS.

Luego creas el input:

<input type="text" id="txt" value="" placeholder="buscar" />

Y sólo te queda realizar la función de búsqueda:

$(document).ready(function() {
  $('#example').DataTable();

  oTable = $('#example').DataTable();
  $('#txt').keyup(function() {
    var valorBuscar = $(this).val(); // Acá formateas el valor del date de búsqueda o que quieras al formato del datasource
    oTable.search(valorBuscar).draw();
  })

});

Otra opción que tienes es investigar un poco más sobre los atributos data-*data-* de HTML5, te dejo un link: DataTables atributos data

Te dejo además un ejemplo sencillo que realicerealicé: Ejemplo

Una de las opciones que puedes realizar es la siguiente:
Crear tu propio input de búsqueda, escondes el de dataTable, y mediante el evento keyup Obtener el valor del input, darle el mismo formato que el del datasource y realizar la búsqueda.

Lo primero por realizar es esconder el input de dataTAble mediante CSS:
 

.dataTables_filter { display: none; }

también se puede desactivar mediante codigo

$('#example').DataTable({ searching: false });

Pero si realizas esto, no puedes realizar búsquedas, así que la mejor opción es esconderlo mediante CSS.

Luego creas el input

<input type="text" id="txt" value="" placeholder="buscar" />

Y sólo te queda realizar la función de búsqueda

$(document).ready(function() {
  $('#example').DataTable();

  oTable = $('#example').DataTable();
  $('#txt').keyup(function() {
    var valorBuscar = $(this).val(); // Acá formateas el valor del date de búsqueda o que quieras al formato del datasource
    oTable.search(valorBuscar).draw();
  })

});

Otra opción que tienes es investigar un poco más sobre los atributos data-* de HTML5, te dejo un link: DataTables atributos data

Te dejo además un ejemplo sencillo que realice: Ejemplo

Una de las opciones que puedes realizar es la siguiente:

Crear tu propio input de búsqueda, escondes el de dataTable, y mediante el evento keyup obtener el valor del input, darle el mismo formato que el del datasource y realizar la búsqueda.

Lo primero por realizar es esconder el input de dataTable mediante CSS:

.dataTables_filter { display: none; }

También se puede desactivar mediante código:

$('#example').DataTable({ searching: false });

Pero si realizas esto, no puedes realizar búsquedas, así que la mejor opción es esconderlo mediante CSS.

Luego creas el input:

<input type="text" id="txt" value="" placeholder="buscar" />

Y sólo te queda realizar la función de búsqueda:

$(document).ready(function() {
  $('#example').DataTable();

  oTable = $('#example').DataTable();
  $('#txt').keyup(function() {
    var valorBuscar = $(this).val(); // Acá formateas el valor del date de búsqueda o que quieras al formato del datasource
    oTable.search(valorBuscar).draw();
  })

});

Otra opción que tienes es investigar un poco más sobre los atributos data-* de HTML5, te dejo un link: DataTables atributos data

Te dejo además un ejemplo sencillo que realicé: Ejemplo

Origen Enlace
MBahamondes
  • 857
  • 1
  • 6
  • 18

Una de las opciones que puedes realizar es la siguiente:
Crear tu propio input de búsqueda, escondes el de dataTable, y mediante el evento keyup Obtener el valor del input, darle el mismo formato que el del datasource y realizar la búsqueda.

Lo primero por realizar es esconder el input de dataTAble mediante CSS:

.dataTables_filter { display: none; }

también se puede desactivar mediante codigo

$('#example').DataTable({ searching: false });

Pero si realizas esto, no puedes realizar búsquedas, así que la mejor opción es esconderlo mediante CSS.

Luego creas el input

<input type="text" id="txt" value="" placeholder="buscar" />

Y sólo te queda realizar la función de búsqueda

$(document).ready(function() {
  $('#example').DataTable();

  oTable = $('#example').DataTable();
  $('#txt').keyup(function() {
    var valorBuscar = $(this).val(); // Acá formateas el valor del date de búsqueda o que quieras al formato del datasource
    oTable.search(valorBuscar).draw();
  })

});

Otra opción que tienes es investigar un poco más sobre los atributos data-* de HTML5, te dejo un link: DataTables atributos data

Te dejo además un ejemplo sencillo que realice: Ejemplo