Saltar al contenido

¿Cómo puedo hacer que jQuery DataTables ordene por valor oculto, pero busque el valor mostrado?

Solución:

Creo que las respuestas existentes están en desuso debido a las actualizaciones de DataTables. HTML5 admite atributos que DataTables puede usar para ordenar columnas fácilmente. Específicamente el data-sort atributo. (Ver https://datatables.net/examples/advanced_init/html5-data-attributes.html)

Puedo ordenar tablas fácilmente así:

<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td data-sort="37">2/1/78 (37 years old)</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td data-sort="35">12/1/80 (35 years old)</td>
    </tr>
  </tbody>
</table>

No importa que la columna ‘Edad’ contenga números, símbolos y letras, DataTables clasificará usando el atributo ‘clasificación de datos’.

Pruebe un enfoque un poco diferente:

Coloque ambas columnas en la tabla (las llamaré DateDisplay y DateSort), no use la función de renderizado y simplemente oculte la columna DateSort. Luego, en la matriz aoColumns para la columna DateDisplay, coloque { "iDataSort": 2 }, donde 2 es un índice de la columna DateSort.

En este caso, la columna DateDisplay se mostrará en los datos originales y el filtro se realizará mediante esta columna, pero la clasificación se realizará por los valores de la columna DateSort.

Hay más detalles sobre la propiedad iDataSort en el sitio de tablas de datos o en la sección http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx “Configurar clasificación”.

Esta es una publicación antigua, pero espero que ayude a alguien más que venga aquí.

En una versión más reciente de DataTables, bUseRendered y fnRender están en desuso.

mRender es la nueva forma de hacer este tipo de cosas y tiene un enfoque ligeramente diferente.

Puede resolver su problema con algo como:

...
{ mDataProp: "Date.Sort"
  bSortable: true, 
  sName: "Date", 
  // this will return the Display value for everything
  // except for when it's used for sorting,
  // which then it will use the Sort value
  mRender: function (data, type, full) {
    if(type == 'sort') return data.Sort;
    return data.Display
  }
}
...
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *