2011-12-26 18 views
54

Sto provando a impostare l'ordinamento predefinito sulla seconda colonna nel mio databile jquery. Di default ordina per indice 0. Sto usando la sintassi "aaSorting": [[ 1, "asc" ]] ma evidenzia la colonna che non voglio sul carico iniziale. Come posso impostare l'ordinamento predefinito di una colonna specifica senza evidenziare la colonna come se non fosse coinvolto alcun ordinamento e la colonna dell'indice 0 fosse utilizzata.ordinamento predefinito dati jquery

+0

vuoi dire che non vuoi l'evidenziazione per ogni azione di smistamento? Se è così, basta cambiare il css per la colonna ordinata dello stesso colore del colore di sfondo della colonna originale – shennyL

+0

Voglio che le colonne cambino colore sull'ordinamento esplicito, ma su qualcosa di simile al paging, voglio che sia paging per colonna 1 senza di esso mostrando esplicita per il cambio di colonna. L'impaginazione ordina dalla colonna 0 senza cambiare il colore della colonna quando si passa alla pagina 2. –

risposta

54

ci sono un paio di opzioni:

  1. Subito dopo l'inizializzazione DataTable, rimuovere le classi di smistamento sull'elemento TD nel TBODY.

  2. Disabilitare le classi di ordinamento utilizzando http://datatables.net/ref#bSortClasses. Il problema è che disabiliterà le classi di ordinamento per le richieste di ordinamento degli utenti, che potrebbero o meno essere ciò che si desidera.

  3. Fare in modo che il server fornisca la tabella nell'ordinamento richiesto e non applicare un ordinamento predefinito sulla tabella (aaSorting:[]).

+0

Quindi sembra che non ci sia una soluzione integrata nella propria API. –

+2

No. Se si desiderava che questa opzione fosse fondamentale, sarebbe necessario aggiungerla a DataTable: non è un requisito che ho mai incontrato durante lo sviluppo di DataTable, ma è sicuramente qualcosa che mi verrà in mente e che dimostra di essere una richiesta popolare e sicuramente la aggiungerò. Fino ad allora le tre opzioni sopra si applicano :-) –

+4

Il suggerimento n. 3 sopra lo ha fatto per me. È molto più semplice disabilitare l'ordinamento e gestirlo semplicemente lato server per i risultati iniziali. Assortimento –

47

Ecco il codice vero e proprio che lo fa ...

$(document).ready(function() 
{ 
    var oTable = $('#myTable').dataTable(); 

    // Sort immediately with column 2 (at position 1 in the array (base 0). More could be sorted with additional array elements 
    oTable.fnSort([ [1,'asc'] ]); 

    // And to sort another column descending (at position 2 in the array (base 0). 
    oTable.fnSort([ [2,'desc'] ]); 
}); 

di non avere la colonna evidenziata, modificare il CSS in questo modo:

table.dataTable tr.odd td.sorting_1 { background-color: transparent; } 
table.dataTable tr.even td.sorting_1 { background-color: transparent; } 
+1

Funziona anche come approccio per ordinare la prima colonna come discendente. Grazie! – veeTrain

+2

+1 mi hai salvato un sacco di dolore e sofferenza !! Questa è stata la soluzione più facile per me. La documentazione di Datatables non è molto esplicativa e confusa. Saluti. – TheOptimusPrimus

+0

@TheOptimusPrimus Accetto: sarebbe bello se suddividessero cose semplici come questa :) – theJerm

2

La migliore opzione è disabilitare l'ordinamento e solo alimentare i dati con l'ordinamento desiderato (dal database o altra fonte). Prova ad aggiungere questo al tuo 'datatable': "bSort": false

0

I datatables supportano gli attributi di dati HTML5 per questa funzionalità.

Esso supporta più colonne nel criterio di ordinamento (è 0-based)

<table data-order="[[ 1, 'desc' ], [2, 'asc' ]]"> 
    <thead> 
     <tr> 
      <td>First</td> 
      <td>Another column</td> 
      <td>A third</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>z</td> 
      <td>1</td> 
      <td>$%^&*</td> 
     </tr> 
     <tr> 
      <td>y</td> 
      <td>2</td> 
      <td>*$%^&</td> 
     </tr> 
    </tbody> 
</table> 

Ora il mio jQuery è semplicemente $('table').DataTables(); e ho la mia seconda e terza colonna ordinati in ordine decrescente/asc.

Ecco alcuni altri attributi bello per il <table> che mi ritrovo il riutilizzo:

data-page-length="-1" imposterà la lunghezza della pagina per Tutti (25 passare per la lunghezza di pagina 25) ...

data-fixed-header="true" ... Fare un'ipotesi

0

Ho avuto anche questo problema. Avevo usato l'opzione stateSave e questo ha causato questo problema.
Rimuovi questa opzione e il problema è risolto.

0

uso questo funziona per me: "ordine": [[1, "ASC"]],

0

questo ha funzionato per me:

 jQuery('#tblPaging').dataTable({ 
      "sort": true, 
      "pageLength": 20 
     }); 
Problemi correlati