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

Question

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

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

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

Es fácil de decir para ordenar tablas de datos basado en la propiedad Date.SortValue y para hacer que la propiedad Display visible para el usuario mediante el uso de fnRender(). Entonces esto me lleva a la mitad de mi objetivo.

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í es mi problema. Quiero permitir que el usuario ingrese un filtro (usando la entrada de filtro incorporada que proporciona DataTables) basado en el valor mostrado, pero no puede.

Por ejemplo. Si un usuario ingresaba "EST", obtendría cero resultados porque los filtros de tablas de datos basados ​​en el valor especificado en mDataProp no se basan en el valor devuelto por fnRender.

¿Alguien me puede ayudar a encontrar la manera de ordenar Y filtrar una columna de fecha? Gracias.

Answer 1

Esta es una publicación anterior, pero espero que esto ayude a otra persona 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.

Usted puede resolver su problema con algo en la línea de:

... 
{ 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 2

intentar un enfoque diferente poco:

poner las dos columnas de la tabla (los llamaré DateDisplay y DateSort), no utilice la función de hacer y simplemente ocultar la columna DateSort. Luego, en la matriz aoColumns para la columna DateDisplay ponga { "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 hará por esta columna, pero la clasificación se hará por los valores en 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".

Answer 3

1 JocaPC

me gustaría añadir a la respuesta de JocaPC recordando a todos que utiliza javascript arrays indexados 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 utilizando la cadena oculta se usaría el siguiente.

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

Answer 4

Umm ... en vez de ir a través de todo este galimatías sólo tiene que añadir un escondido span con su "Ordenar por" en la parte delantera:

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

Nota: esto no significa que puedan buscar por el valor oculto o muestra ... esto puede ser una consecuencia no se puede vivir.

Answer 5

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

puedo ordenar fácilmente las tablas de este modo:

<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 de la 'edad' contiene números, símbolos y letras, tablas de datos va a clasificar a través del 'Data- sort 'atributo.

Answer 6

Debes 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

Dado que ya tiene sus datos en formato ordenable 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' 
    } 
}]