Veebilehtedel andmete kuvamiseks kasutavad veebiarendajad tabelite asemel enamasti div. Eesmärk on pakkuda lõppkasutajale paremat kogemust. Just seetõttu tutvustame arendajatele jQuery tabeli pluginaid. See aitab neil vähem või ilma vaevata andmeid sortida, hallata ja kuvada.

Veebiarenduses on varem arutletud selle üle, kuidas ja millal tabeleid kasutada.

Järeldus on: tabeliandmetega tegelemine nõuab absoluutselt tabelite kasutamist.

WpDataTablesi professionaalide meeskond on kogunud parimad jQuery tabelipluginad, mida saate kasutada tabeliandmete jaoks.

Kontrollige neid!

Korralikud jQuery tabelipluginad

Freezeheader

Freezeheader, nagu selle nimigi ütleb, külmutab päiserea standardses HTML-i tabelis. See on lihtne jQuery pistikprogramm, mida tuntakse ka fikseeritud päiste tabelina.

jQueryTabledit

jQueryTabledit on HTML-tabelite tekstisisene redaktor, mis ühildub Bootstrapiga. Saate redigeerida tekstisiseselt nagu arvutustabelit või nuppudega, et muuta muutmis- ja vaatamisrežiimi vahel.

jQueryTreetable

jQueryTreetable võimaldab kuvada puud HTML-i tabelis. Võite kasutada kataloogistruktuuri või pesastatud loendit.

Parandatud päiste tabel

See jQuery pistikprogramm loob fikseeritud päistega tabeleid. Saate seda kasutada mis tahes kehtiva tabeli märgistuse jaoks.

WaTable

WaTable on kohandatav jQuery tabeli pistikprogramm. See pakub sortimise, lehitsemise ja filtreerimise võimalusi.

Bootstrapi andmetabel

Seda jQuery pistikprogrammi kasutatakse stiili kujundamiseks. Sellega saate tabeleid sortida, lehte panna ja filtreerida. Samuti saate seda kasutada tabeliikoonides kasutatavate FontAwesome’i ikoonide jaoks.

Dateeritav

Datatable on andmetabeli pistikprogramm. Seda kasutatakse jQuery tabeli lehekülgede muutmiseks, filtreerimiseks ja AJAX-i laadimiseks.

Bootstrap tabel

See on funktsiooniderikas pistikprogramm. See kuvab andmed tabelivormingus. Samuti pakub see rikkalikku tuge raadiole, märkeruutudele, Bootstrap tabeli sortimisele, lehekülgedele jne.

tabel Eksport

tableExport on jquery pistikprogramm, millega saate eksportida HTML-tabeli JSON-, XML-, PNG-, CSV-, TXT-, SQL-i, MS Wordi, MS Exceli, MS Powerpointi või PDF-vormingusse.

StickyTable Headers

StickyTableHeaders paneb päise jQuery tabeli kerimise kasutamisel ekraani ülaossa kinni. See on eriti kasulik suurte laudade jaoks.

jQuery redigeerimise tabel

See on kerge jQuery pistikprogramm, mis täidab tühimiku, kui andmetabelite vaikesisestusväli puudub. JQuery redigeeritavat tabelit saab kasutada nii AJAX-i kui ka/või HTTP POST-i võistlustel. Samuti võimaldab see eelseadistada pealkirja ja veergude arvu. Samuti on võimalus anda kasutajale täielik vabadus.

Dünaamiline

Dynatable on semantiline, interaktiivne ja lõbus kasutada. Samuti kasutab see HTML5 ja JSON. See pakub lihtsat laiendatavat API-d. See on eriti kasulik suuremate andmekogumite puhul, kuna hõlbustab vaatamist ja suhtlemist.

Dynatable pakub raamistikku kõige tavalisemate elementide, näiteks jQuery tabeliotsingu, koheseks rakendamiseks. See on kasulik ka jQuery sortitavate tabelite ja filtreerimise jaoks.

HighChartTabel

HighchartTable on veel üks neist jQuery tabeli pluginatest. See teisendab HTML-i andmetabelid lihtsal viisil Highchart graafikuteks. Sellel on palju atribuute, mis võimaldavad teil graafikut kohandada.

ReStable

ReStable on väga lihtne ja kerge pistikprogramm tundlike tabelite loomiseks, mis näevad head välja väiksemates seadmetes. Selle pistikprogrammi korral aheneb ka iga jQuery reageeriv tabel loendiks.

Vastuvõtlikud tabelid

See on kasulik tabeli plugin mobiilisõbralike jQuery tabelite loomiseks.

jQuery filtritabel

jQuery filtritabeli pistikprogramm pakub jQuery pistikprogrammis HTML-tabelite reaalajas otsimise ja filtreerimise võimalust. See pistikprogramm lisab teie tabelisse ka jQuery otsingufiltri . See tähendab, et iga kord, kui sisestate midagi jQuery filtrisse, peidetakse tabelisse kõik read, mis filtrit ei sisalda.

Loll laud

StupidTable on tabelite sortimise pistikprogramm. See on absurdselt kerge ja rumalalt lihtne. Ainus oluline asi on see, et mõistaksite põhilist JavaScripti tabeli sortimist. Sellega saate seda jQuery tabeli pistikprogrammi täielikult juhtida. Tehke nii palju või nii vähe kui soovite!

Stacktable.js

Veel üks neist jQuery tabeli pluginatest on Stacktable.js. See on pistikprogramm jQuery tabeli elementide kõrguse ja/või laiuse võrdsustamiseks. jQuery pistikprogramm pakub lihtsat viisi laiade jQuery tabelite teisendamiseks väikeste ekraanide jaoks sobivamasse vormingusse. See loob tabeli koopia ja teisendab selle kaheveeruliseks võtme/väärtuse vorminguks.

FooTable

FooTablemakesi HTML-tabelid on mobiilisõbralikud. Olenemata sellest, kui palju andmeveerge teil tabelis on, muudab FooTable plugin selle suurepäraseks. See muudab HTML-i tabelid ilusateks tabeliteks, mis on nii laiendatavad kui ka reageerivad.

JSON alglaadimistabelisse

JSON To Bootstrap Table plugin on üks lihtsamini kasutatavaid jQuery tabeli pluginaid. See on ülim pistikprogramm JSON-failiandmetest reageerivate tabelite kuvamiseks. See toob andmed taustaprogrammist (JSON-fail, mis on tavaline JavaScripti funktsioon) ja loob selle põhjal tabeli.

Peate vaid sõeluma oma JSON-andmed ja edastama need pistikprogrammile JSON To Bootstrap Table. Mobiilisõbralik jQuery pistikprogramm loob seejärel automaatselt tabeli erinevate toimingunuppudega, sealhulgas Bootstrap tabeli sortimise ja lehekülgede muutmise funktsiooniga.

CSS3 hinnatabel – jQuery tabeli plugin

See on tabeliplugin hinnatabelite loomiseks CSS3 ja jQuery abil. See kasutab animeeritud tabelite loomiseks puhtaid CSS3 animatsiooniefekte. See pakub erinevaid animatsioonistiile tabelianimatsioonidega katsetamiseks.

Selle jQuery tabelipluginaga saate luua erineva värvistiiliga hinnatabeleid. Konkreetsete plaanide märgistamiseks saate isegi lisada märke ja bännereid.

Kui vajate abi, pakub see tabeliplugin teile KKK-d ja lähtefaile, millega saate tutvuda. See sisaldab ka tasuta värskendusi tulevikuks.

Tab

Tabulaator on veel üks meie jQuery tabeli pistikprogrammide artikli kirjetest. Seda saab kasutada interaktiivsete ja laiendatavate tabelite dünaamiliseks genereerimiseks. Need võivad pärineda kas HTML-ist, JavaScripti massiivist, AJAX-i andmeallikast või JSON-andmetest.

Sellel pistikprogrammil on lai valik funktsioone. Saate lisada filtreerimisfunktsiooni, sortimisfunktsiooni, reguleeritava veeru laiuse, tabeliandmete nutika laadimise, jQuery tabeli lehekülgede muutmise ja otsese tabeli sisendi redigeerimise.

Tabulaatoril on põhjalik dokumentatsioon ja see on tervikuna väga paindlik. Selle veebisaidil on välja toodud kõik funktsioonid, mida see võib pakkuda, ja seetõttu otsustasime selle sellesse loendisse lisada.

Dokumente on väga lihtne mõista ja need töötavad koos mitme tekstisisese näitega. Dokumentatsioon on pikk ja kaasahaarav, kuid sisaldab kõike, mida peate selle jQuery tabeliplugina käivitamiseks teadma.

FancyGrid

FancyGrid on üks jQuery tabelipluginatest, mis lisab teie standardtabelitele muid funktsioone ja lisafunktsioone. See annab andmetabelitele rohkem jõudu.

Kui soovite lihtsat, kerge stiiliga tabelit, tagab FancyGrid teile uhke HTML-tabeli, millega töötada. Kui soovite tabelit filtrite või sortimis- ja lehekülgede muutmise funktsiooniga, pakub FancyGrid teile seda. Igal juhul saavad teie kasutajad suurepärase lauakogemuse.

FancyGridi saab kasutada mitmel viisil, olenevalt sellest, kuidas soovite seda teha. Saate seda kasutada laudade kujundamiseks, et neist ilusaid laudu teha. Saate seda kasutada ka uute funktsioonide lisamiseks. Või võite selle integreerida Highchartsiga, et pakkuda andmete visualiseerimist.

jQueryKingTable

See pistikprogramm on suurepärane lahendus neile, kes soovivad oma andmetabeli toimimise üle tugevat kontrolli. See sobib suurepäraselt kontode, projektijuhtimise või muude tegevuste jaoks, mis keskenduvad suuresti andmetele.

See on keerukas arendajale keskendunud pistikprogramm, mis pakub tabelilahendusi, mida saate kasutada keeruka otsitava tabeli koostamiseks tugevate filtreerimistingimustega.

Erinevalt mõnest teisest jQuery tabeli pistikprogrammist on KingTable täielikult GitHubis dokumenteeritud. Sellele on pühendatud isegi Wikipedia leht, mis kirjeldab kõiki pistikprogrammide sätteid ja kasutusjuhtumeid.

Funktsioonid hõlmavad teemade kujundamise tuge, selle kohandamist vastavalt teie vajadustele. Samuti saate andmehalduse hõlbustamiseks lisada mitu filtrit ja sündmust.

See pistikprogramm on mõeldud ainult neile, kes tunnevad oma kohandatud filtrite ja andmemehhanismide loomist. See on tugevalt keskendunud arendaja pistikprogramm. Kui otsite põhiseadeid, võivad teised pistikprogrammid olla sobivamad.

Lõpetame mõtted parimate jQuery tabeli pistikprogrammide kohta

Need on vaid mõned jQuery tabeli pistikprogrammid, mida saate oma andmetabelite jaoks kasutada. Neid saab kasutada oma projektides, et laiendada ja parandada oma tabelite funktsionaalsust ja välimust. Kui teid huvitab ainult kerge stiil ja ilusate laudade loomine, on selle tegemiseks olemas pistikprogramm.

Teise võimalusena, kui soovite lisada lisafunktsioone, nagu filtrid, veergude sortimine, AJAX-i/JSON-i laadimine jne, on selleks ka pistikprogramm. Kui soovid teha otsitavat tabelit – selleks on olemas plugin. Lühidalt öeldes muudavad ülaltoodud tabelipluginad teie elu lihtsamaks ja kasutajakogemuse palju paremaks.

Kui tunnete, et vajate professionaalset abi, võite alati proovida pistikprogrammi wpDataTables. Viige end paremini kurssi meie pistikprogrammi kõigi funktsioonidega või proovige praktilisema lähenemise jaoks tasuta Lite versiooni WordPressi pistikprogrammide hoidlas .

Rakendusel wpDataTables ei ole veergude ja ridade arvu ega andmestruktuuri osas mingeid piiranguid ning see suudab reageerivaid tabeleid loomulikult edastada. Pistikprogramm toetab paljusid andmetüüpe ja erinevaid redaktori sisestustüüpe. Kas ma mainisin, et see on mobiilisõbralik? Noh, ma tegin nüüd.

Kui teile meeldis lugeda seda artiklit jQuery tabeli pluginate kohta, peaksite seda Bootstrapi tabelite kohta vaatama .

Kirjutasime ka mõnest seotud teemast, nagu CSS-tabelid, CSS-iga reageerivad tabelid, HTML-tabelid, Tabeli tsentreerimine CSS-iga, tabeli taustavärv.

: wpdatatables.com