5

Actualmente estoy utilizando el plug-in DatTables para crear una tabla con controles, interacción y demás características que me provee el plug-in.

En la documentación se dice que para realizar búsquedas, el plug-in por defecto hace una búsqueda sobre el Datasource que se le paso al momento de crear la Tabla en el browser, y eso me parece perfecto, el problema está en que una cosa son los datos que se le paso al Datasource, y otra es el formato con el que se muestra el Datasource al cliente.

Me explico, para los tipos fecha se pasa de la siguiente manera /Date(1448558527000)/ pero el cliente ve 26/11/2015 12:21:31.

En ese orden de ideas, sucede que al momento de hacer una búsqueda por el número 70 se encontrará la siguiente coincidencia:

26/11/2015 12:21:31

Esto es por que en el Datasource esta buscando:

/Date(144855852 70 00)/

Esto le genera confusión al usuario y tiene toda la razón al decir que el filtro "no funciona" pero si funciona, lo que no coincide es nuestro Datasource con el formato que ve el cliente en el browser.

¿Alguien sabe como puedo hacer para que este filtro haga una búsqueda formateando dicho dato?

¿O qué idea me siguieren para este problema?

2
  • 1
    ¿Tu cambias la fecha o lo hace el Date antes de enviarlo al DataTable? o ¿Cómo haces para mostrar esa fecha con el formato final? ¿Podrías agregar más código sobre lo que tratas de hacer?
    – learnercys
    Commented el 31 dic. 2015 a las 7:20
  • 1
    que formato es este /Date(1448558527000)/ ?? Commented el 31 dic. 2015 a las 14:23

1 respuesta 1

3

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.