10 najlepszych wtyczek tabel jQuery w 2020 roku

Szukasz sposobu na tworzenie solidnych tabel o zróżnicowanych właściwościach rozszerzonego układu?

Tutaj wymieniłem 10 wtyczek tabel jQuery, które pomogą Ci to zrobić i wiele więcej!

Był czas, kiedy tabele były szeroko wykorzystywane w treściach i układach stron internetowych do różnych celów. Teraz, w dzisiejszych czasach, układy oparte na tabelach są przede wszystkim martwe, a podejście nieco się zmieniło. Dlatego jeśli potrzebujesz tabel w Internecie, to w zasadzie służą one do pokazywania danych tabelarycznych dotyczących danego wydania.

W miarę upływu czasu koncepcja procesu demonstracji przy stole bardzo się zmieniła. Stół przyjazny dla urządzeń mobilnych to teraz zapotrzebowanie na czas. W dzisiejszych czasach rozważa się o wiele więcej kwestii. Będąc starszą częścią kodu HTML, tabele generalnie nie są najlepiej przystosowane do projektów zorientowanych na urządzenia mobilne, ani zazwyczaj nie oferują żadnych zaawansowanych funkcji po wyjęciu z pudełka. Tabele służą zasadniczo do wyświetlania danych, a w niektórych przypadkach jest to w porządku.

Często jednak możesz chcieć, aby tabele były bardziej współczesne i przyjazne dla urządzeń mobilnych, zapewniając responsywny układ lub udostępniając dodatkowe funkcje, takie jak wyszukiwanie, filtrowanie, sortowanie lub inne zaawansowane funkcje. Dlatego w tym poście omówię wybór wtyczek obsługujących jQuery do tworzenia, rozszerzania i ulepszania dowolnego rodzaju tabeli.

Najlepsze darmowe wtyczki tabel jQuery

Tutaj zebrałem dla Ciebie 10 najlepszych rozwiązań wtyczek tabeli jQuery o otwartym kodzie źródłowym, które możesz wykonać samodzielnie na swoich stronach internetowych. Mam nadzieję, że to Ci pomoże i spodoba Ci się! Zanurzmy się bezpośrednio w poście i znajdźmy najlepsze wtyczki do tabel jQuery.

1. Dynatable

Wtyczka Dynatable jQuery daje Ci kontrolę nad zadaniami tworzenia tabeli i oczywiście wtyczka zdecydowanie zasługuje na uwagę. W niektórych przypadkach, gdy jesteś całkowicie zainteresowany JavaScript/jQuery, niektóre przykłady lub dokumentacja mogą Cię odstraszyć.

Dlatego korzystając z Dynatble znajdziesz wszystko, co jest gotowe do użycia i nie musisz się martwić. Wszystko można po prostu skonfigurować i możesz doskonale korzystać z wtyczki, korzystając z jej domyślnej konfiguracji, a co najważniejsze, nie będziesz potrzebować żadnego dostosowywania, aby wypolerować dowolną tabelę.

Jedna rzecz, chociaż wtyczka jest stosunkowo stara, nadal działa i oferuje mnóstwo funkcji ze świetnymi funkcjami. Co więcej, wtyczka oferuje 70 572 pobrań i oferuje dokładną dokumentację.

Dynatable pozwala swoim użytkownikom na jedno- lub wielokolumnowe, inteligentne sortowanie po wyjęciu z pudełka, a także możesz kliknąć nagłówek raz w górę, ponownie w dół i ponownie, aby zatrzymać sortowanie według tej kolumny. To może być świetne rozwiązanie do służenia Twoim celom.

Ciekawostki: Zapytanie niestandardowe i sortowanie niestandardowe.

Pobierz wtyczkę: Witryna i GitHub .

2. Stół Bootstrap

CSS jest nadal bardzo popularny, a Bootstrap jest jednym z wiodących frameworków CSS. Wtyczka tabeli Bootstrap to bogata w funkcje i lekka wtyczka do tabel, która zapewnia ty wszystkie funkcje potrzebne do wykonania minimalnej pracy programistycznej.

Jedną z najważniejszych cech wtyczki jest jej moc i zakres, który jest niesamowity, ponieważ możesz zmienić styl swoich tabel, aby były w pełni responsywne. Oprócz tego możesz dodać więcej funkcji, takich jak filtrowanie, wyszukiwanie, warunkowe wyświetlanie kolumn i tak dalej. Możesz także ukryć kolumny, aby tabela była całkiem prosta.

Wtyczka jest obsługiwana przez tysiąc s współtwórców i ma tysiące zobowiązań. Rozwój wtyczki jest procesem ciągłym i jest to rozwijający się projekt open-source.

Wtyczka jest historycznie świetna w zapewnianiu wsparcia dla swoich użytkowników i była stale iterowana, aby uczynić ją lepszym produktem. Wybór tego może być dla Ciebie mądrą opcją. Wtyczka oferuje również szereg rozszerzeń, które zapewniają szeroką gamę przydatnych usług.

Ciekawostki: Zaradne rozszerzenie. Eksport do CSV i JSON.

Pobierz wtyczkę: Witryna i Demo .

3. Sortownik tabel jQuery

jQuery Table Sorter to wtyczka do tabel jQuery, która sprawia, że ​​tabelę HTML z tagami THEAD TBODY można sortować bez odświeżania strony.

Ta wtyczka może analizować i sortować tak wiele typów danych, w tym połączone dane w komórce. Istnieje wiele funkcji wtyczki Table Sorter. Pozwala na sortowanie wielokolumnowe i wielobryłowe.

Jednym z najważniejszych aspektów wtyczki jest kompatybilność z różnymi przeglądarkami, co oznacza, że ​​działa jednocześnie z IE 6.0+, FF2+, Safari 2.0+, Opera 9.0+ i tak dalej. Możesz mieć system widżetów za pomocą wtyczki, która zwiększa rozszerzalność użytkowania.

Możesz zobaczyć wtyczkę z ich oficjalnej strony i pobrać ją z Github.

4. Tabele danych

Jest to rozbudowana wtyczka, która zapewnia dodatkową funkcjonalność do tworzenia dowolnych tabel, takich jak sortowanie, filtrowanie, paginacja i niestandardowe motywy. Wtyczka różni się od innych i oferuje obszerną dokumentację, dzięki której możesz opanować tworzenie tabel.

Rozbudowane funkcje i dostosowywanie sprawiają, że wtyczka jest przyjazna dla programistów. Wtyczka zapewnia nie tylko wszechstronne funkcjonalności, ale także solidną dokumentację. Integracja z frameworkami CSS w celu zmiany stylu wtyczki jest dość majestatyczna.

Jedną z fajnych części wtyczki jest system wsparcia premium poprzez raporty o błędach GitHub lub bezpośredni kontakt z twórcą za pośrednictwem forum wsparcia. Co więcej, jeśli chcesz zintegrować DataTables z systemem korporacyjnym lub czymś krytycznym. W takim przypadku możesz kupić licencję korporacyjną, która: dawać s masz bezpośrednie wsparcie od programistów.

W ogólnym podejściu mogę powiedzieć, że DataTables oferuje funkcje zorientowane na programistę z opcjonalnym elementem wsparcia i asystenta.

Pobierz wtyczkę: Witryna i Demo.

5. Możliwość sortowania – wtyczka jQuery

Sortable to jedna z najbardziej znanych wtyczek jQuery, która zasadniczo działa do sortowania tabel. Jeśli chcesz dodać jakąkolwiek funkcjonalność sortowania, wystarczy dodać tę wtyczkę jQuery i wszystko będzie gotowe! ?

Ta wtyczka jest wtyczką typu open source opartą na JavaScript i biblioteka CSS. Głównym zadaniem wtyczki jest sortowanie tabel. Za pomocą wtyczki możesz upuścić dowolny skrypt i styl za pomocą 6 oszałamiających motywów.

Ta wtyczka jest przyjazna dla urządzeń mobilnych i zawiera niewielki ślad i nie ma żadnych zależności. Jest to kompatybilna z różnymi przeglądarkami, która może działać jednocześnie z IE8+ , Firefox 4+ , ​​Current Webkit (Chrome, Safari) i Operą .

Aby zaimplementować wtyczkę w swoim środowisku, wystarczy dołączyć style i skrypt źródłowy. Przykładowa baza kodu jest podana poniżej dla lepszego zrozumienia.

 <link rel="stylesheet" href="sortable-theme-dark.css" /> <script src="sortable.min.js"></script>

Następnie dodaj atrybut sortable do tabeli i niektórych klas.

 <table class="sortable-theme-dark" data-sortable> <!-- ... --> </table>

Teraz możesz posortować tabelę bez ponownego ładowania strony. W ten sposób możesz to zrobić.

Pobierz wtyczkę: Witryna i GitHub.

6. JSON do tabeli Bootstrap

JSON To Bootstrap Table Wtyczka jQuery pozwala na uruchamianie responsywnych tabel z danych pliku JSON. Wtyczka utworzy tabelę pełną danych pobieranych z zaplecza.

Ta wtyczka jest świetną wtyczką, która ma wyświetlać responsywną tabelę Bootstrap z paginacją i przyciskami akcji. Wystarczy przeanalizować dane JSON i przekazać je do wtyczki tabeli JSON to Bootstrap, aby dynamicznie utworzyć tabelę.

Za pomocą tej wtyczki jQuery możesz określić rozmiar strony, kolumnę klucza podstawowego, pokazać/ukryć/edytować, usunąć przycisk akcji itp.

Pobierz wtyczkę: C odecanyon Stronie internetowej.

7. TinyTable – jQuery Table Plugin

TinyTable to inteligentna wtyczka do tabel jQuery, która służy do tworzenia wszelkiego rodzaju responsywnych tabel. Wszystkie tabele będą wyglądać świetnie w przeglądarce mobilnej/telefonicznej, a ta wtyczka pomoże Ci stworzyć format przyjazny dla urządzeń mobilnych.

Wtyczka automatycznie przekonwertuje szerokość tabeli na maksymalną szerokość okna przeglądarki. Istnieje opcja o nazwie overflow, która trzyma tabelę w specjalnym pojemniku i gdy jest wyświetlana na th telefon komórkowy telefon umożliwia gest machnięcia.

Istnieje inna opcja, która polega na przekształceniu tabeli w tabelę z 2 kolumnami, która rozciągnie Twoją witrynę na całej jej długości. Co więcej, korzystając z wtyczki, możesz mieć wiele opcji prezentowania długich tabel, upiększając je.

Wtyczka jest kompatybilna z różnymi przeglądarkami z IE9, IE10, IE11, Firefox, Safari, Opera i Chrome itp. Jest to inteligentna wtyczka jQuery, nad którą możesz pracować.

Pobierz wtyczkę: C odecanyon Website.

8. Piła stołowa — bezpłatna wtyczka jQuery

Jest to darmowa wtyczka jQuery, która ma korzystać z responsywnego widoku tabeli z zachowaniem wysokiej jakości rozdzielczości ekranu. Nadal wyzwaniem dla programistów jest utrzymanie responsywnego projektu stołu z odpowiednią rozdzielczością ekranu.

Wtyczka Tablesaw jQuery zawiera kilka rodzajów trybów, które pozwalają ustawić sposób, w jaki będą reagować Twoje tabele. Krótka lista trybów znajduje się poniżej:

• Stos — umożliwi to układanie nagłówków tabel w układy dwóch kolumn z nagłówkami po lewej stronie i danymi po prawej stronie. Dzieje się tak, gdy widoczny obszar ma mniej niż 40 em lub 640 pikseli szerokości.
• Przełączanie kolumn — umożliwia użytkownikom ustawienie widoczności kolumny.
• Tryb przesuwania — korzystanie z trybów przesuwania.
• Przełącznik trybu — służy do przełączania między różnymi trybami.
• Sortable — służy do sortowania danych w tabeli.
• Zlew kuchenny – służy do łączenia wszystkich trybów w jednym urządzeniu.
• Zaznacz wszystko — włącza pole wyboru, które służy do przełączania innych pól wyboru w kolumnie.

Ta wtyczka odcięła musztardę dla wsparcia klasy A z IE9+, Android Browser 2.3 i Blackberry OS 6+.

Pobierz wtyczkę: GitHub .

9. Tablesorter - jQuery Table Plugin

Wtyczka Tablesorter jQuery to darmowa wtyczka, która służy do przekształcania standardowej tabeli HTML w ładną tabelę, którą można sortować. Zaletą wtyczki jest to, że nie musi przeładowywać strony podczas sortowania tabeli. Wtyczka może łatwo sortować i analizować wiele typów danych, w tym dane połączone w komórce.

Używając Tablesorter możesz uzyskać nowe wzbogacenie, takie jak sortowanie alfanumeryczne, funkcje wywołania zwrotnego strony, wiele widżetów, lepkie nagłówki, aplikacja motywu UI, filtry kolumn, i resizer, itp.

Tablesorter obsługuje Bootstrap V2-4 i ma dostępne parsery do sortowania zwykłego tekstu, adresów URL, liczb zmiennoprzecinkowych, liczb całkowitych, waluty, adresu IP, dat i czasu itp. Możesz także samodzielnie utworzyć własny. Wtyczka ma bardzo mały rozmiar kodu, zaczynając od zaledwie 25k zminimalizowanego.

Pobierz wtyczkę: GitHub .

10. FootTable – jQuery Table Plugin

FooTable to wtyczka jQuery, która sprawia, że ​​zwykła tabela HTML jest responsywna. Wtyczka jest wbudowana w jQuery i zasadniczo działa z Bootstrapem. To sprytna wtyczka, dzięki której Twoje stoły będą mądrzejsze niż kiedykolwiek.

FooTable pozwala ukryć niektóre kolumny na mniejszych urządzeniach i wyeliminować skalowanie tabeli dla dużej tabeli. Dlatego użytkownicy mogą rozwinąć każdy wiersz, aby zobaczyć zawartość ukrytych kolumn.

Bez względu na to, ile kolumn danych możesz mieć w tabeli utworzonej przez tę wtyczkę, FooTable przekształca wszystkie te tabele HTML w rozwijalne tabele responsywne.

Wtyczka udostępnia użytkownikom 3 gotowe motywy tabel i mogą dodawać niestandardowe CSS w dowolnym miejscu na stole. Za pomocą selektora CSS możesz kierować reklamy na dowolną tabelę w swojej witrynie.

Pobierz wtyczkę: GitHub .

Są to najbardziej wpływowe wtyczki jQuery, jakie możesz mieć podczas tworzenia dowolnej tabeli dynamicznej w swojej witrynie. Wszystkie wymienione tutaj wtyczki mają działać prawie w ten sam sposób, aby tworzyć tabele. Każda z wymienionych powyżej wtyczek może być dla Ciebie najlepszą opcją.

Po przeczytaniu posta możesz pomyśleć o dowolnej wtyczce do WordPressa, która służy temu samemu celowi w lepszy sposób. Polecam Ci wtyczkę Ninja Tables WordPress , która jest zbudowana z połączenia biblioteki jQuery i frameworka Bootstrap w sposób przyjazny dla WordPressa.

Pobierz wtyczkę Tabele Ninja

Wniosek

W praktycznych przypadkach istnieje tak wiele sposobów na dodawanie tabel na swojej stronie, że to od Ciebie zależy, jakie typy wtyczek chcesz używać na której platformie. Możesz być użytkownikiem innym niż WordPress lub możesz nim być.

Jeśli nie korzystasz z WordPressa, możesz użyć dowolnego z wymienionych powyżej na liście. Lub jeśli jesteś użytkownikiem WordPressa, zdecydowanie sugeruję, abyś wybrał tabele Ninja bez żadnych wątpliwości.

Jeśli już korzystasz z któregoś z nich, daj mi znać o swoich doświadczeniach z korzystaniem z wtyczki. Lub jeśli jeszcze nie próbowałeś, po prostu wypróbuj którykolwiek z nich. Poinformuj nas o swoich wymaganiach, jeśli potrzebujesz lub jakichkolwiek sugestiach dotyczących tematu.

Jeśli jesteś użytkownikiem WordPressa, na pewno użyjesz tabel Ninja.