Nume | Prenume | Data | Suma | |
---|---|---|---|---|
1 | Popescu | Otilia | 01.03.2015 | 24 |
2 | Ionescu | Gheorghe | 01.06.2015 | 534 |
3 | Dunca | Vlad | 21.02.2011 | 21 |
4 | Moerescu | Ion | 11.02.2015 | 12 |
5 | Blandiana | Ana | 01.02.2005 | 45 |
1. Cerinte preliminare
Libraria javascript jQuery:https://jquery.com/download/
Libraria javascript tablesorter:
https://mottie.github.io/tablesorter/docs/index.html
2. Cod tabel
Pentru a construi acest exemplu am folosit un tabel simplu cu 5 coloane si 6 randuri. De asemenea am folosit mai multe tipuri de date pentru a vedea cum se comporta sortarea.
Identificatorii (id si class) leaga urmatoarele functionalitati:
1. myTable - scriptul de initializare al sortarii pe tabel
2. tabelAvansat - stilul CSS general al tabelului
3. resetSortare - scriptul de resetare al sortarii, un clic pe aceasta celula va reseta sortarea
4. celulaIndex - stilul CSS pentru coloana de index al tabelului
Identificatorii (id si class) leaga urmatoarele functionalitati:
1. myTable - scriptul de initializare al sortarii pe tabel
2. tabelAvansat - stilul CSS general al tabelului
3. resetSortare - scriptul de resetare al sortarii, un clic pe aceasta celula va reseta sortarea
4. celulaIndex - stilul CSS pentru coloana de index al tabelului
2. Cod stil CSS
3. Cod javascript
La incarcarea paginii se apeleaza functia de initializare a tabelului. In acest exemplu am setat tipul de data dare va fi folosit in tabel si am dezactivat sortarea pe primul tabel. De asemenea am atasat functia de resetare a sortarii pe prima celula din header.