Seega soovite oma veebisaidile lisada liigatabeli. Kuidas seda tehakse? Üks võimalus on manustada skript väliselt veebisaidilt. See aga toob endaga kaasa erinevaid turvaprobleeme ja on ka aeglasem protsess.

Teine võimalus on lisada tabel otse, kasutades visuaalset WordPressi redaktorit. See võimaldab kohandada tabelit vastavalt teie vajadustele.

Kolmas võimalus on kasutada pistikprogrammi wpDataTables. Selle pistikprogrammi abil saate hõlpsasti luua tabeleid, nagu see.

Paljud tahavad teada, kuidas see Premier League’i tabel loodi. Allpool on kirjeldatud lihtsate, kaasaegsete interaktiivsete tabelite loomise sammud kasutades wpDataTables.

Kuidas luua Premier League’i tabelit

See tabel põhineb Aqua nahal. Muudatused tehti ümbritseva piirde eemaldamisega. Tabel sorteeritakse automaatselt kasvavas järjekorras, lähtudes esimeses veerus olevast teabest.

Veeru „#" tingimusvorming on järgmine:

Kohandatud CSS on järgmine:


.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd:hover td{background-color:#fffbf1 !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.grey,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.grey{background-color: #dcdcdc !important;border-left: 1px solid #dcdcdc !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.blue,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.blue{background-color: #0083c2 !important;border-left: 1px solid #0083c2 !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.red,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.red{background-color: #d6181f !important;border-left: 1px solid #d6181f !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.lightblue,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.lightblue{background-color: rgb(91,192,222) !important;border-left: 1px solid rgb(91,192,222) !important;}
.white-text { color: #fff !important; }

Märgid võeti teisest kolonnist. Liverpooli näide näitab, kuidas märgid lisati stringi tüüpi veergu:

Kohandatud CSS määratleb seejärel klassid "märk-1" ja "märk-1.t1".


.badge-1 {    background-image: url(

Klubi hari kujutise paigutuse valib teine klass, nagu on näidatud allpool kõigi liigatabelis olevate klubide kohta:


.badge-1.t1 {    background-position: -250px -225px;}
.badge-1.t2 {    background-position: -250px -250px;}
.badge-1.t3 {    background-position: -275px -325px;}
.badge-1.t4 {    background-position: -150px -150px;}
.badge-1.t5{     background-position: 0 -50px;}
.badge-1.t6{    background-position: -275px -200px;}
.badge-1.t7 {      background-position: -350px -75px;}
.badge-1.t8 {    background-position: -50px -125px;}
.badge-1.t9 {    background-position: -250px -125px;}
.badge-1.t10 {    background-position: -350px -250px;}
.badge-1.t11 {    background-position: 0 -200px;
}
.badge-1.t12 {        background-position: -350px -125px;}
.badge-1.t13 {    background-position: -100px -100px;}
.badge-1.t14{        background-position: -50px -175px;}
.badge-1.t15 {    background-position: -250px -225px;}
.badge-1.t16 {    background-position: -325px -250px;}
.badge-1.t17 {    background-position: -75px -150px;}
.badge-1.t18 {    background-position: -25px -150px;}
.badge-1.t19 {        background-position: -75px -225px;}
.badge-1.t20 {    background-position: -225px -100px;    }

Järgmised veerud täidetakse täisarvudega. Viimane veerg sisaldab võitude/kaotuste/viikide statistikat. Soovitud paigutuse saavutamiseks on vaja palju tingimusvormingut:

Vormingut tuleks rakendada kuni numbrini 20. See on Liverpooli näide:

Iga meeskonna üksikasjad on erinevad. Kogu muu teabe leiate kohandatud CSS-ist:


.score-last-6 {    margin:0 auto;    border-collapse: separate;    display: table;    border-spacing: 3px 0;
height:11px;
vertical-align: middle;
}

.score-last-one{display: table-cell;    height: .7em;    width: .7em;}

.win {background: #0083c2;}

.lose{background: #d6181f;}

.equal {background: #dcdcdc;}

Täpselt samasuguse väljanägemise saavutamiseks on vaja natuke tööd ja näpunäidet teha, kuid põhimõtteliselt tehakse seda nii.

Kui see rakendus wpDataTables oli teile huvitav, vaadake ka mõnda muud tabelit esitlusosast.

Statistikatabelid diagrammidega

WpDataTablesi kasutatakse statistiliste andmete graafilise esituse genereerimiseks diagrammidena.

Krüptovaluutade reitingutabel

Selles näites järjestatakse krüptovaluutad tabelis, kasutades wpDataTables. Saate selle krüptotabeli oma saidile lisada.

Sülearvutite veebikataloog

Seda tabelit saab kasutada toodete võrdlemiseks. Näiteks kui teil on partnersait, saab tabelis kuvada kõige populaarsemate sülearvutimudelite omadused.

Ilmateated

wpDataTablesi kasutatakse siin igakuise kokkuvõtliku ilmateate koostamiseks.

Finantsaruanded

Pistikprogrammi kasutatakse tabeli loomiseks, mis näitab finantsandmeid riigiti.

Raamatute kataloog

See tabelistiil sobib hästi sidusettevõtte saidile, näiteks raamatupoele.

Investeerimisfondid

wpDataTables saab luua investeerimisfondide loendi, mis on sorteeritud jõudluse järgi.

Juhtide kataloog

wpDataTables kasutatakse draiveri konfiguratsiooni kuvamiseks.

Liituge kogukonnaga wpDataTables

Kui töötate tabelitega, on siin mõned põhjused, miks wpDataTablesi litsents teie vajadustele sobib.

See muudab tabelite ja diagrammidega töötamise väga lihtsaks.
wpDataTables on maailmas enimmüüdud WordPressi tabeli pistikprogramm.
Juba enam kui 30 000 rahulolevat ettevõtet ja eraisikut kasutab wpDataTablesi.
Seda kasutatakse finants-, teadus-, statistika-, äri- ja muudes andmehaldusrakendustes.

Looge reageerivad WordPressi tabelid ja diagrammid

Pistikprogrammi wpDataTables abil loodud tabelid on olemuslikud ja täielikult reageerivad. Platvormide või seadmetüüpide osas pole piiranguid.

Looge suuri tabeleid

Suured lauad pole probleemiks. wpDataTables käsitleb miljonite ridadega tabeleid kiiresti ja usaldusväärselt. MySQL-server töötleb kõiki toiminguid.

Täpsemad filtrid ja otsinguvalikud

Andmestiku jaoks saab välja töötada individuaalsed filtrid. See on väga kasulik WordPressi tabeli andmete kitsendamiseks.

Redigeeritavus

wpDataTablesil on võimalus muuta see redigeeritavaks. WordPressi tabelite sisu saab seega redigeerida tekstisiseselt või genereeritud kujul.

Lahtri esiletõstmine

Meie WordPressi tabelite pistikprogrammil on Exceli tingimusvorminguga sarnane funktsioon. Sõltuvalt nende sisust saate esile tõsta veerge, ridu või üksikuid lahtreid.

Loo diagramme

WordPressi tabelites olevaid andmeid saab kasutada WordPressi diagrammide loomiseks. Nende graafikute koostamiseks kasutatakse kolme võimsat mootorit, mida uuendatakse reaalajas.

Mõned arvustused, mida oleme aastate jooksul saanud

wpDataTables lahendab iga päev edukalt erinevaid ülesandeid enam kui 30 000 kliendi jaoks. See hõlmab andmebaasidega suhtlemist, äriaruandeid, katalooge, teaduslikke armatuurlaudu ja palju muud.

wpDataTables on olnud meie jaoks suurepärane lahendus! Pistikprogrammi võimalused avaldasid meile juba karbist võttes väga muljet. TMS-pluginad tegid meiega koostööd, et kohandada seda just meie vajadustele vastavaks. Kohandused võimaldasid meil luua klientidele intuitiivse liidese andmete sisestamiseks ja redigeerimiseks. Klienditugi ja reageerimisvõime on ületamatud. wpDataTables on lihtsalt suurepärane toode.

-Sara Woodmansee, USA. Fotograaf ja geokaardistamine ettevõttes Geo1 / Aerial Filmworks

Veebiarendaja ja kliendi vaatenurgast on wpDataTables üks parimaid pistikprogramme, millega kokku puutusin. Mitte ainult hind on hea, vaid ka funktsionaalsus on täiuslik. Äärmiselt lihtne kasutada ja väga hästi disainitud. Sellel on palju funktsioone, mis sobivad kõigile, alates algajatest kuni edasijõudnuteni. Pistikprogrammi täiendavad videod on paljude näidetega põhjalikult selgitatud. Ma ei suuda piisavalt rõhutada, kui palju see minu veebiarendust lihtsamaks ja lahedamaks muutis.

– Nordine Benhamari, Suurbritannia. Veebiarendaja, Thaneti vabatahtlike büroo andmebaaside kujundaja

Kui teile meeldis lugeda seda Premier League’i tabeli loomise artiklit, peaksite seda WordPressi tabeligeneraatori pistikprogrammide kohta vaatama.

Kirjutasime ka mõnest seotud teemast, nagu DataTablesi alternatiiv, JavaScripti tabeliteek, WordPressi tabelipluginad, kuidas WordPressis tabelit ilma pistikprogrammita luua, kuidas WordPressi tabelit lisada ja WordPressi hinnatabeli pistikprogrammid.

: wpdatatables.com