ordering - ¿Cómo puedo obtener jQuery DataTables para ordenar el valor oculto, pero buscar el valor mostrado?

datatables ordering columns

Question

Tengo una cuadrícula de DataTables simple que contiene columnas de fecha. He proporcionado dos valores para la fecha en mi conjunto de datos JSON, uno para mostrar y otro diseñado específicamente para que DataTables pueda clasificarlo. Mi aplicación web permite a los usuarios elegir un montón de formatos de fecha diferentes, por lo que debe ser flexible.

Estos son mis datos JSON que DataTables obtiene del servidor web a través de sAjaxSource .

{
  Reports : [
    { Date: { Sort = "20101131133000", Display : "11/31/2010 1:30 PM" } }, 
    { Date: { Sort = "20100912120000", Display : "1200 EST 2010-09-12" } }, 
  ]
}

Es fácil decirle a DataTables que ordene en función de la propiedad Date.SortValue y que haga visible la propiedad Display para el usuario usando fnRender() . Así que esto me lleva a la mitad de mi meta.

var dataTableConfig = {
  sAjaxSource: "/getreports",
  sAjaxDataProp: "Reports",
  aoColumns: [
    { mDataProp: "User" },
    { mDataProp: "Date.Sort", 
      bSortable: true, 
      sName: "Date", 
      bUseRendered: false, 
      fnRender: function (oObj) {
        return oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].sName].Display;
      }
    }
  ]
};

Aquí está mi problema. Quiero permitir que el usuario ingrese un filtro (usando la entrada de filtro incorporada que proporciona DataTables) según el valor mostrado, pero no pueden.

Por ejemplo. Si un usuario ingresara "EST", obtendría cero resultados porque los filtros de datos se pueden basar en el valor especificado en mDataProp no en el valor devuelto por fnRender .

¿Puede alguien ayudarme a averiguar cómo ordenar Y filtrar una columna de fecha? Gracias.

Answer 1

+1 Joca PC

Me gustaría agregar a la respuesta de JocaPC recordando a todos que javascript utiliza matrices de indexación cero.

Ejemplo:

HiddenSortString (0) | Date (1) | Some Text (2) ................................................................... 1349035566 | September 30, 2012 2:06 pm | blah blah 1349118137 | October 01, 2012 1:02 pm | blah blah 1349371297 | October 04, 2012 11:21 am | blah blah ...................................................................

Para ordenar el campo de fecha usando la cadena oculta, usaría lo siguiente.

$(''.mytable'').dataTable({
    "aoColumns": [{"bVisible": false},{"iDataSort": 0},null]
});

Answer 2

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

Puedo ordenar fácilmente las tablas de esta manera:

<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, las Tablas de datos ordenarán usando el atributo ''ordenamiento de datos''.

Answer 3

Dado que ya tiene sus datos en formato clasificable y visualizable, este es todo el código que necesita.

Utilizará Date.Sort para ordenar y Date.Display para efectos visuales. Esto está documentado here .

columns: [{
    data: ''Date'',
    render: {
        _:   ''Display'',
        sort: ''Sort''
    }
}]

Answer 4

Este es un post antiguo, pero espero que esto ayude a alguien más que viene 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.

Puedes resolver tu 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
  }
}
...

Answer 5

Probar un enfoque un poco diferente:

Coloque ambas columnas en la tabla (las llamaré DateDisplay y DateSort), no use la función de representación 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á por esta columna, pero la clasificación se realizará por los valores en la columna DateSort.

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

Answer 6

Tienes que ordenar la columna por una columna oculta (Ordenar). Para esto, debe incluir una columna que contenga los datos de clasificación, ocultar la columna y ordenar la columna de visualización por la columna oculta.

   "aoColumnDefs:[
    {"sTitle": "Display", "iDataSort":1, "aTargets":[2]},
    {"bVisible": false, "aTargets":[2]}
    ], 

aoColumns: [
    { mData: "User" },
    { mData: "Display"},
    { mData: "Sort"}
  ]

Answer 7

Umm ... en lugar de atravesar todo este rigmarole, solo agrega un span oculto con tu "Ordenar por" en la parte delantera:

<td><span style="display:none;">20101131133000</span>11/31/2010 1:30 PM</td>

Nota : Esto significa que pueden buscar por el valor oculto o mostrado ... esto puede ser una consecuencia con la que no puede vivir.