2009-07-07 30 views
20

Estoy usando el complemento de tablesorter para ordenar mis tablas en una aplicación MVC .NET. La mayoría de mis columnas son cadenas y no tengo problemas con ellas. Ni con los numéricos. La cuestión es que mis columnas de fecha y hora también se ordenan como si fueran cadenas. Se ordenan de esta manera: 01/04/2009, 02/02/2009, 03/08/2009, etc. Obtengo los datos del Modelo en esa Vista.Problema con las fechas de clasificación con jQuery tablesorter

Mi llamado es el que viene por defecto:

$("#table").tablesorter(); 

he intentado especificando dateformat sin suerte:

$("#table").tablesorter({ 
      dateFormat: 'dd/mm/yyyy'}); 

Lo curioso sucede cuando introduzco manualmente una tabla estática con las fechas al azar. ¡Se ordena! Pero mis datos provienen de una llamada a DB y se incluyen en el Modelo, luego lo paso y escribo tr's con los datos.

Gracias de antemano.

EDITAR: ¿Podría ser algo relacionado con la forma en que creo los tr?

<% foreach (var item in Model) { %> 
<tr> 
<td> 
<%= Html.Encode(item.date) %> 
</td> 
<td>...</td> 
<td>...</td> 
<td>...</td> 
</tr> 
<% } %> 
+0

¿Es posible formatear su fecha en aaaa-mm-dd? – ScottE

+0

no, tiene que estar en la localidad de mi país (España). :( –

Respuesta

26

Intente agregar un analizador de Tablesorter a su columna de fecha. Tablesorter viene con un analizador para shortDate, usLongDate e isoDate.

$("#table").tablesorter({ 
    headers: { colNum: { sorter: 'shortDate'} } 
}); 

donde colNum es la columna con las fechas. El único ejemplo que pude encontrar en el sitio de tablesorter es here. Esto también funciona si el sistema de clasificación de mesas también está equivocando los números. También hay otros analizadores para el porcentaje, la dirección IP y más. Eche un vistazo cerca del final del código fuente y se enumerarán allí.

Editar: Al analizar el código fuente, la opción dateFormat parece estar buscando sólo "nos", "Reino Unido", "dd/mm/aa" o "dd-mm-aa". ¿Qué sucede cuando pruebas "uk"?

+0

Probé shorDate aswell analizador pero olvidó mencionar No hubo suerte, ya sea :(Voy a dar una oportunidad a los otros analizadores de fecha y hacerle saber Gracias –

+12

Eso funcionó que poner la llamada de la siguiente manera:..! $ ("# mesa").tablesorter ({dateFormat: 'uk'}); Me pregunto por qué, con la llamada predeterminada, funciona según lo previsto al escribir una tabla en HTML simple y no cuando se genera MVC (y tiene que encontrar esta solución). Gracias! –

+1

¡Una vez más, StackOverflow parece ser el único lugar con la respuesta correcta! dateFormat: 'uk' también funciona para mí, mientras que dateFormat: "dd/mm/aaaa" no funciona. –

16

que tiene el mismo problema, y ​​añadió un analizador personalizado llamado de fecha y hora:

$.tablesorter.addParser({ 
    id: "datetime", 
    is: function(s) { 
     return false; 
    }, 
    format: function(s,table) { 
     s = s.replace(/\-/g,"/"); 
     s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1"); 
     return $.tablesorter.formatFloat(new Date(s).getTime()); 
    }, 
    type: "numeric" 
}); 

Entonces sólo tiene que aplicar ese formato a las columnas que desea, como Gabe G expuesto (Por ejemplo, para asignar este clasificador para la primera columna que debe hacer lo siguiente:

$("#mytable").tablesorter( 
    { dateFormat: 'dd/mm/yyyy', 
     headers: 
      { 
       0:{sorter:'datetime'} 
      } 
    }); 
+0

Esto funciona genial. Gracias –

2

No existe una actualización para plugin de jQuery tablesorter

de acuerdo con la configuración regional del su aplic. ación, puede ordenar las fechas por esta actualización.

Puede ver la actualización de la tablesorter siguiendo el siguiente enlace.

http://tablesorter.openwerk.de/

7

También puede agregar una etiqueta span oculta antes de la fecha en formato numérico (AAAAMMDD). Este texto aparecerá primero y se usará para clasificar, pero se ocultará a la vista y solo mostrará el formato que desee.

<td><span style="display:none">20130923</span>23 September 2013</td>  
+1

Sería más lógico utilizar un atributo 'data- *' en la celda de la tabla, en lugar de tener un tramo como elemento secundario. –

0

fácil utilización manera:

dateFormat:'mm/dd/yyyy hh:mm:ss' 
0

Para ser sincero, la solución más simple para mí fue, como dijo compsmart, añadiendo un poco de texto oculto en la parte delantera de la fecha real.

  • dateFormat: 'uk' no estaba trabajando para mí, tal vez porque mi nuevo formato de fecha es diferente
  • http://tablesorter.openwerk.de/ implica la modificación de la CSS, en primer lugar yo no entiendo por qué y en segundo lugar el esfuerzo es más grande que simple adición de texto oculto en frente de la fecha.

¡Me gusta la solución KISS de compsmart!

0

http://mottie.github.io/tablesorter/docs/

establecer el formato de fecha. Aquí están las opciones disponibles. (Modificado v2.0.23).

  • "mmddaaaa" (por defecto)
  • "ddmmaaaa"
  • "aaaammdd"

En versiones anteriores, esta opción se establece como "nosotros", "Reino Unido" o "dd/mm/aa ". Esta opción se modificó para ajustarse mejor a los formatos de fecha necesarios. ¡Solo funcionará con cuatro dígitos!

El clasificador se debe establecer en "shortDate" y el formato de fecha se puede configurar en la opción "dateFormat" o establecer para una columna específica dentro de la opción "headers". Mira la página de demostración para ver cómo funciona.

$(function(){ 
    $("table").tablesorter({ 

    dateFormat : "mmddyyyy", // default date format 

    // or to change the format for specific columns, 
    // add the dateFormat to the headers option: 
    headers: { 
     0: { sorter: "shortDate" }, // "shortDate" with the default dateFormat above 
     1: { sorter: "shortDate", dateFormat: "ddmmyyyy" }, // day first format 
     2: { sorter: "shortDate", dateFormat: "yyyymmdd" } // year first format 
    } 

    }); 
}); 

columnas individuales pueden ser modificados por la adición de los siguientes (todos hacen la misma cosa), situado en orden de prioridad (v2.3.1 Modificado):

  • jQuery datos data-dateFormat =" mmddyyyy ".
  • metadata class = "{dateFormat: 'mmddyyyy'}". Esto requiere el complemento de metadatos.
  • cabeceras de opciones de encabezados: {0: {dateFormat: 'mmddyyyy'}}.
  • clase del encabezado class class = "dateFormat-mmddyyyy". Opción de fechaFormato general.

En mi caso he utilizado

$("#myTable").tablesorter({dateFormat: "uk"}) 

para la versión.

Cuestiones relacionadas