search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[jQuery] Responsywne tabele z danymi

[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

  • Dzięki za koeljny przydatny wpis 🙂
    btw w treści akapitu „Taki efekt można osiągnąć za pomocą jQuery i dodatkowych pluginów, takich jak: a href=?http://themergency.com/footable/? rel=?nofollow?>FooTable.” przeoczyłeś zamknięcie z linkiem:)

  • Świetna sprawa z możliwością kliknięcia w celu pokazania ukrytych wierszy. Warto by było jednak dodać jakiś element sugerujący, że coś jest ukryte.

  • Piotr Nalepa

    Jak najbardziej można coś dodać, np. tło. Jest odpowiednia klasa dołożona do jednej z komórek tabeli.
    W demie to pominąłem.

  • Aleksander

    Cześć Piotrze. Poznaliśmy się w czasie Joomla Day w Poznaniu, byłem opiekunem sali, w której miałeś swoją prezentację. Mam do Ciebie prosbę: Czy byłbyś uprzejmy wyjaśnić jak wykorzystać podany tu sposób w dostosowaniu tabel zamieszczanych w artykułach na stronach opartych na Joomla!2.5, tak by również były one responsywne?
    Pozdrawiam
    Alex51

  • witaj 🙂
    należy zadbać o to by nie było konfliktów z biblioteką Mootools. Następnie należy przygotować tabelkę wg wzorca podanego w artykule, dołączyć plik z pluginem jQuery oraz bibliotekę jQuery do strony oraz napisać skrypt, który dla wskazanej tabeli wywoła akcję. Nie wiem, czy o takie wyjaśnienia dokładnie chodziło.

  • Aleksander

    Dziękuję Piotrze za odpowiedź. Niestety, być może dla bardziej zorientowanego w temacie byłaby ona odpowiednia. Typowy użytkownik Joomla! potrzebuje jednak bardziej specyficznego podejscia w wyjaśnieniu mu sposobu umieszczenia wspomnianego przez Ciebie skryptu, wywołujacego całą akcję. Rozumiem, że napisałeś swój artykuł dla osób zajmujacych się tematem a moje pytania reprezentują podejscie laika, ale takie właśnie osoby reprezentuję jako człónek PCJ i dla nich chcę uzyskać Twoje wsparcie.