[jQuery] Responsywne tabele z danymi
Jednym z największych problemów responsywnych web dizajnów są reklamy oraz tabele z danymi.
Jeśli chodzi o reklamy to jednym z najczęściej stosowanych rozwiązań jest tworzenie odpowiednich pakietów z miejscami reklamowymi zależnie od rozdzielczości urządzenia użytkownika strony. Natomiast, jeśli chodzi o tabele z danymi, to największym wyzwaniem jest upakowanie wszystkich danych tak, aby się zmieściły na jednym ekranie bez potrzeby przewijania.
Przykładowa struktura danych w tabeli
Przykładowymi danymi tabelarycznymi, które można prezentować na stronach WWW są tabele ligowe przedstawiające osiągnięcia drużyn w danym sezonie. Znajdujemy w nich nazwy drużyn, mecze, punkty, bramki, itd., itp.
Przykład takiej tabelki może wyglądać następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <table> <thead> <tr> <th>Pozycja</th> <th>Drużyna</th> <th>Mecze</th> <th>Punkty</th> <th>Zwycięstwa</th> <th>Remisy</th> <th>Przegrane</th> <th>Zdobyte</th> <th>Stracone</th> <th>+/-</th> <th>Forma (5 meczy)</th> </tr> </thead> <tbody> <tr> <td>1.</td> <td>Unia Jaroszowiec</td> <td>22</td> <td>49</td> <td>16</td> <td>1</td> <td>5</td> <td>105</td> <td>57</td> <td>+48</td> <td>W-W-W-P-P</td> </tr> <tr> <td>4.</td> <td>United Team</td> <td>22</td> <td>41</td> <td>12</td> <td>5</td> <td>5</td> <td>70</td> <td>47</td> <td>+23</td> <td>R-W-W-W-R</td> </tr> .... </tbody> </table> |
Tabele a'la RWD - czyli co ukryć, a co pokazać?
Jednym z bardzo ciekawych podejść do przedstawiania danych w tabeli jest ukrywanie mniej istotnych danych i pozostawienie na widoku najważniejszych danych. Mniej ważne dane są pokazywane w momencie kliknięcia w jakiś dodatkowy element na stronie lub po najechaniu na wybrany wiersz.
Taki efekt można osiągnąć za pomocą jQuery i dodatkowych pluginów, takich jak: FooTable. Plugin ten pozwala na określenie, które dane są tymi mniej ważnymi oraz pozwala na określenie punktów w których wybrane dane będą znikać z głównego widoku tabeli. Tym sposobem jesteśmy w stanie tak prezentować dane, aby zawsze wyglądały atrakcyjnie bez potrzeby żmudnego przewijania.
Sposób wykorzystania tego pluginu jQuery wygląda następująco. Na początku trzeba zaktualizować strukturę HTML o data atrybuty, dzięki którym skrypt będzie wiedział, jakie dane należy ukryć dla jakiej rozdzielczości.
Należy pamiętać o dołączeniu pliku z biblioteką jQuery oraz plugin FooTable do pliku HTML. Najlepiej zaraz przed zamknięciem znacznika body.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <table class="footable"> <thead> <tr> <th data-class="expand">Pozycja</th> <th>Drużyna</th> <th>Mecze</th> <th>Punkty</th> <th data-hide="phone">Zwycięstwa</th> <th data-hide="phone">Remisy</th> <th data-hide="phone">Przegrane</th> <th data-hide="phone,tablet">Zdobyte</th> <th data-hide="phone,tablet">Stracone</th> <th data-hide="phone,tablet">+/-</th> <th data-hide="phone,tablet">Forma (5 meczy)</th> </tr> </thead> <tbody> <tr> <td>1.</td> <td>Unia Jaroszowiec</td> <td>22</td> <td>49</td> <td>16</td> <td>1</td> <td>5</td> <td>105</td> <td>57</td> <td>+48</td> <td>W-W-W-P-P</td> </tr> <tr> <td>4.</td> <td>United Team</td> <td>22</td> <td>41</td> <td>12</td> <td>5</td> <td>5</td> <td>70</td> <td>47</td> <td>+23</td> <td>R-W-W-W-R</td> </tr> ... </tbody> </table> |
Do tabelki dodano klasę footable, a do nagłówków tabel: data atrybuty. Następnie przygotowujemy skrypt JS, który włącza pożądany przez nas efekt:
1 2 3 4 5 6 | $(function() { $('table').footable({ tablet: 768, phone: 480 }); }); |
W powyższym skrypcie zdefiniowałem 2 punkty kontrolne, które mają określona szerokość: tablet - 768px, phone - 480px. W ten sposób skrypt będzie chował kolumny przy określonej szerokości. Dane jednak będą widoczne na życzenie użytkownika. Wystarczy, że kliknie w wybrany wiersz. Tym samym pojawi się dodatkowy wiersz pod klikniętym, który będzie prezentował ukryte dane.
Resposywne tabele - podsumowanie
Przedstawiony powyżej przykład jest jednym z wielu możliwych rozwiązań problemu tabel z danymi w RWD. W mojej opinii, jest to najciekawszy sposób jaki spotkałem do tej pory, ponieważ zapewnia odpowiedni stopień interakcji z użytkownikiem, pozwalając mu na osłonięcie brakujących danych na żądanie nie psując wyglądu przy tym ogólnego wyglądu strony.
Mam nadzieję, że również uznasz powyższy przykład za wystarczająco interesujący, aby zaimplementować go u siebie w projekcie.
Demo z tego artykułu można znaleźć tutaj: jQuery tabele RWD