[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.

Sekcja 1Przykł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>

Sekcja 2Tabele 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.

Sekcja 3Resposywne 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