2010-09-16 33 views
5

Estoy usando DataTables para mostrar algunos datos y funciona muy bien pero quiero personalizarlo un poco y no estoy seguro de cómo.Jquery DataTables cambian orden a desc cuando ordena

Lo que quiero hacer es cuando un usuario hace clic en el encabezado de una columna para ordenar esa columna, quiero que ordene inicialmente de forma descendente en vez de ascendente. ¿Hay alguna manera de hacer esto?

+1

Ambas versiones 1.9 y 1.10 tienen formas similares de entrega de este; vea la respuesta de SteD para 1.9 (esta es la [documentación de AsSing 1.9] (http://legacy.datatables.net/usage/columns)) y mi respuesta a continuación para la ordenada descendente por defecto de 1.10 para 1 o más (¡o '_todos los '!) columnas. – veeTrain

Respuesta

11

Tener un vistazo a esto: DataTables sorting direction control example

Usted puede hacer algo como:

$(document).ready(function() { 
    $('#example').dataTable({ 
     "aoColumns": [ 
      { "asSorting": [ "desc", "asc" ] }, //first sort desc, then asc 
     ] 
    }); 
}); 
+0

¡Gracias funciona genial! ¿Conoces alguna forma de que al ordenar puedas tener los campos en blanco/vacíos en último lugar en lugar de primero? – John

+1

Gracias por esto. ¿Sabes por casualidad si se ha agregado una forma para establecer el valor predeterminado para toda la tabla? No pude encontrar uno. – Dave

+0

Parece que esto no funciona con v. 1.10.x ahora? No se puede encontrar una solución apropiada. –

0

La única manera de conseguir sus los en blanco última sería un poco de un truco (ya que la especie está trabajando correctamente).

En lugar de devolver valores en blanco de su servidor, devolver algo como: "[blanco]"

Yo no lo he probado, pero estoy bastante seguro de corchetes vendrán después de códigos alfanuméricos. También los corchetes simbolizan tradicionalmente algo que aún no se ha completado o confirmado.

2

En respuesta a la clasificación de los espacios en blanco pasado, esto es lo que ocurrió con--
(que odio los espacios en blanco de clasificación primero !!)

incluir estas funciones de ordenación personalizada

// custom sort functions 
jQuery.fn.dataTableExt.oSort['text-blankslast-asc'] = function (x, y) { 
    x = (x == "") ? String.fromCharCode(255) : x; 
    y = (y == "") ? String.fromCharCode(255) : y; 
    return ((x < y) ? -1 : ((x > y) ? 1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['text-blankslast-desc'] = function (x, y) { 
    x = (x == "") ? String.fromCharCode(0) : x; 
    y = (y == "") ? String.fromCharCode(0) : y; 
    return ((x < y) ? 1 : ((x > y) ? -1 : 0)); 
}; 

Aplique las etiquetas de ordenación a las columnas apropiadas

// init example 
$('#table2').dataTable({ 
    "bJQueryUI": true, 
    "aoColumns": [ 
     null, 
     { "sType": "text-blankslast" }, 
     { "sType": "text-blankslast" }, 
     { "sType": "text-blankslast" }, 
     null 
    ] 
}); 
+0

o simplemente agregue texto oculto para que aparezca en el lugar apropiado. Ex.

zzzzz
- un truco, pero fácil de implementar. –

2

Si alguien más como Dave y yo buscamos la forma de establecer el orden en todas las columnas, lo siguiente puede funcionar para usted. Con el fin de cambiar el orden de clasificación en todas las columnas I fijó un bucle para alterar los ajustes después de la mesa había una instancia:

$(document).ready(function() { 
    var example_table = $('#example').dataTable(); 
    $.each(example_table.dataTableSettings[0].aoColumns, function(key, column) { 
     column.asSorting = [ "desc", "asc" ]; 
    }); 
}); 

Espero que ayude. Probado en jQuery 1.11.0 y 1.10.0 DataTables

3

La versión actual de DataTables (1.10) proporciona el siguiente modo de conmutación de este orden de clasificación predeterminado con la propiedad orderSequence bajo columnDefs (o columns pero menos flexible).

Aquí está la documentación en orderSequence.

"columnDefs": [ 
    { "orderSequence": [ "desc", "asc"], "targets": [ 1 ] }, 
] 

Como se menciona también, que puedan dar lugar a una columna de única especie cuando se hace clic o como DESC ASC cual su interfaz puede muy bien beneficiarse.

En mi caso, tenía que tener columnas que descienden de su tipo en el clic inicial para un número indeterminado de columnas, así que decidí cambiar el ejemplo para apuntar el nombre de un encabezado de columna class en lugar de definir explícitamente cada columna como "targets":[1],"targets":[2],...[n] o programáticamente la construcción una matriz de los índices de las columnas que me importaban.

Puede orientar las columnas de varias maneras according to here.

El resultado final es una definición de la tabla de este modo:

<table><thead><tr> 
    <th class='descendFirst'>DESCend when first clicked</th> 
    <th>a normally sorted ASC->DESC->... column</th> 
    ... 
</tr></thead></table> 

Y tabla de datos facultado como tal:

$("#table").dataTable({ 
    "columnDefs": [ 
     {"orderSequence": ["desc","asc"], "targets":"descendFirst" }, 
    ] 
}); 

Voila! Primero haga clic en ordenación descendente en todas las columnas con un <th> marcado con una clase de 'descendFirst' (un nombre de clase descriptivo elegido arbitrariamente).

0

Esto funciona para mí:

 settings = { 
      aoColumnDefs: [ 
      { 
       orderSequence: ["desc", "asc"], 
       aTargets: ['_all'] 
      } 
     ]}; 

     $('.dataTable').DataTable(settings); 
Cuestiones relacionadas