2009-06-04 4 views
18

Come posso rendere una tabella ordinabile utilizzando javascript senza caricare i dati tramite AJAX? In particolare, sto cercando una soluzione che mi dà il seguente:Come posso rendere una tabella HTML ordinabile con javascript senza caricare i dati tramite AJAX?

  • Opere su una tabella HTML vecchio pianura
  • Rende colonne ordinabili usando un paragone naturale
  • è agnostico della tecnologia server-side (dovrebbe essere portatile indipendentemente dal fatto che le tabelle vengano renderizzate da JSP, PHP, ecc.)
  • Implementato preferibilmente come estensione a JQuery, che sto già utilizzando nel progetto specifico a cui vorrei applicare immediatamente questo. Sono aperto a suggerimenti che coinvolgono un altro framework javascript come YUI, ma sarà necessario giocare con JQuery.

Quello che non sto cercando:

  • Una soluzione che mi richiede di popolare i dati tramite una chiamata AJAX. Mi piacerebbe applicare questo in un progetto che ha un numero di semplici vecchie tabelle HTML per cose come risultati di ricerca che mi piacerebbe rendere rapidamente ordinabile senza riscrivere alcun codice lato server.
  • Cercapersone.
  • Filtraggio.
  • La possibilità di specificare una logica di confronto arbitraria.

Sto omettendo intenzionalmente il nostro stack tecnologico per il progetto specifico su cui sto lavorando per ora, ma lo includerò se le persone ritengono che sia assolutamente necessario. Ancora una volta, sono più interessato a soluzioni che non coinvolgono nulla sul server. Ci sono un sacco di progetti scritti in tutti i tipi di lingue che potrebbero usare un po 'di amore in quest'area.

Per quanto riguarda la questione dei simili, domande esistenti su Stack Overflow

Ho fatto qualche rovistando, e la questione più vicina che posso trovare per il mio è this one. Le mie esigenze sono leggermente diverse, tuttavia, quindi ho deciso di porre una nuova domanda.

risposta

20

Il plug-in jQuery tablesorter funziona molto bene.

+0

interessato a sapere perché questo è stato downvoted. –

3

Prova sortable.js.

+0

Abbastanza vecchio, ma molto molto facile da personalizzare e fare lavoro. Dolce –

+0

@RedFilter sto usando il sortable.js ma non funziona vedi [qui] (http://stackoverflow.com/questions/24386439/why-ajax-response-is-not-in-sortable-manner?noredirect = 1 # comment37718205_24386439) –

1

Insieme alla risposta di OrbMan, è possibile consultare wikibits.js, che è la versione di MediaWiki del codice di ordinamento. Non richiede alcun codice AJAX o colla speciale, solo una semplice classe (ordinabile) per designare tabelle ordinabili.

Il codice è concesso in licenza e utilizzato in produzione in tutti i siti Wikimedia.

MODIFICA: MediaWiki è passato a una versione di Tablesorter a partire da 86088 (aprile 2011).

4

Tablesorter è un plugin jQuery che funziona in modo simile a sortable.js, trasformando una normale tabella HTML in una ordinabile.

+2

ti picchiò di pochi secondi: P –

+1

Maledici Antony Trupe! –

1

Mi piace molto tristen's tablesort. È privo di dipendenza, leggero e non richiede molto stile/non compromette il tuo stile!

1

1-Scarica le sorttable.js

2-Includere i sorttable.js, mettendo un link ad esso nella HEAD della pagina, in questo modo:

3-Mark vostra tavola come ordinabile dandogli una classe di "ordinabile":

<table class="sortable"> 
+0

attualmente disponibile all'indirizzo: http://www.kryogenix.org/code/browser/sorttable/ È utile se non si desidera utilizzare o non si utilizza jquery. – pdwalker