Archiwa kategorii: Tabele

Pajinate – paginacja w jQuery

pajinate

Paginacja to nic innego jak mechanizm przełączania się między stronami. Paginacja jest przydatna w sytuacji, kiedy chcemy wyświetlić listę i zależy nam na tym, aby nie przesuwać suwakiem przeglądarki w gorę i w dół. Dzięki temu skraca nam się wysokość strony, gdy istnieje taka potrzeba. Drugą zaletą paginacji jest to, że nie wczytujemy naraz wszystkich danych (jednak istnieją wyjątki). Ogólnie w necie można spotkać trzy rodzaje paginacji. Pierwsza to normalna paginacja, nie wykorzystuje ani Ajax ani żadnego frameworka, ale zwykłe zapytania do bazy metoda POST lub GET (tak też działa paginacja na stronie Taipa.pl wada jest dłuższe ładowanie strony). Dwie następne sposoby to metody Ajax. Druga metoda (pokazana w tym komponencie) polega na wczytaniu wszystkich danych a paginacja zapewni ukrycie jej części. Wraz z przełączaniem się stron poprzednie strony się chowają, a pokazują następne. Wadą tego rozwiązania jest to, że w przypadku bardzo dużej ilości danych, może to nie być rozwiązanie zbyt efektywne. Ostania metoda to rozwiązanie Ajax. Zasada działa jest taka, jak w przypadku pierwszego rozwiązania, z ta różnicą że strona nie wczytuje się w całości, a jedynie część z danymi. Mam nadzieję że ten mini wykładzik do komponentu który dziś prezentuje wprowadzi nowicjuszy i nie rozczaruje banalnością weteranów ajax :)

pajinate

Wymagania: jQuery
Link: http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/
Licencja: Darmowa

DataTables – prezentacja danych w tabeli z użyciem jQuery

datatables

DataTables to komponent na frameworku jQuery. Dzięki niemy w bardzo prosty sposób możemy prezentować dane w tabeli. Komponent DataTables daje wiele opcji, dzięki którym można dostosować skrypt do potrzeb własnej strony. Na stronie skryptu można znaleźć wiele przykładów użycia rożnych funkcji takich jak; wczytywanie danych metodą Ajax, paginacja zmiennej długości, sortowanie, filtrowanie kolumn, edytowanie pól w tabeli oraz wiele innych.

datatables

Wymagania: jQuery
Link: http://www.sprymedia.co.uk/article/DataTables+1.4
Licencja: GPL, BSD

Równej wysokości pola bez względu na zawartość

CSS równej wysokości

Może ten post będzie trochę inny od reszty. Nie zaprezentuje tu żadnego komponentu, ale pewien sposób użycia CSS. Często gdy projektowałem strony WWW, pojawiał się problem gdy strona była zbudowana z samych znaczników <div>. Otóż kiedy było tworzone lewa i prawa część strony (na przykład menu i środek strony ), obie części nie były równej wysokości. Kiedy przybywało lub ubywało treści z któreś ze stron, również pojawiał się problem. Oczywiście problem można rozwiązać używając znaczników <table> ale jak się chce szpanować na wielkiego znawce XHTML to wypadało by nie używać <table> :). Sprawdzałem osobiście kompatybilność z przeglądarkami FF, IE8, Opera, Chrome oraz Safari.

CSS równej wysokości

Link: http://vivee.info/2008/01/10/kolumny-rownej-wysokosci-za-pomoca-css/

Redips.net – tabela chwyć i upuść w Ajax

redips

Prosty sposób na wykorzystanie tabeli i Ajax do przeciągania zawartości między poszczególnymi komórkami tabeli.  Na stronie można znaleźć 4 przykłady zastosowań komponentu. Jeden z przykładów przedstawia zapisywanie aktualnego ułożenia zawartości komórek tabeli.

redips

Link: http://www.redips.net/javascript/drag-and-drop-table-content/
Link: http://www.redips.net/javascript/drag-and-drop-example-2/
Link: http://www.redips.net/javascript/drag-and-drop-example-3/
Link: http://www.redips.net/javascript/drag-and-drop-example-4/
Licencja: Darmowa

TableSorter – tabelka z sortowaniem w jQuery

table-sorter

Jeżeli potrzebujesz tabeli z możliwością posortowania wyników ten komponent będzie do tego odpowiedni. Korzystając z frameworka jQuery tworzy w nagłówkach tabeli strzałki do sortowania. Niepotrzebne jest tym samym kodowanie takiej funkcjonalności. Komponent umożliwia nie tylko sortowanie ale też dodawanie do tabeli innych rekordów korzystając z technologi AJAX.

table-sorter

Wymagania: jQuery
Link: http://tablesorter.com
Licencja: MIT lub GPL