Laajennuksessamme on muutamia ominaisuuksia, joita voit k\u00e4ytt\u00e4\u00e4 k\u00e4ytett\u00e4viss\u00e4si olevan tietol\u00e4hteen mukaan.<\/p>\n
Jos sinun on luotava taulukko tyhj\u00e4st\u00e4, suosittelemme taulukon luomista manuaalisesti<\/a>. T\u00e4m\u00e4 on yksi wpDataTablesin yleisimmist\u00e4 k\u00e4ytt\u00f6tavoista: taulukoiden luominen ja niiden t\u00e4ytt\u00e4minen WordPressin hallintapaneelista otetuilla tiedoilla ilman olemassa olevan tietol\u00e4hteen (Excel, CSV, Google Spreadsheet, JSON, XML, MySQL DB jne.).<\/p>\n Jos kuitenkin haluat luoda taulukon tietyst\u00e4 tietol\u00e4hteest\u00e4, n\u00e4m\u00e4 oppaat voivat auttaa sinua p\u00e4\u00e4sem\u00e4\u00e4n alkuun wpDataTablesin kanssa:<\/p>\n Siirryt\u00e4\u00e4n nyt eteenp\u00e4in ja sanotaan, ett\u00e4 tilastotaulukossa on paljon sarakkeita, jotka haluat esitt\u00e4\u00e4 verkkosivustollasi. Ilmeisesti t\u00e4m\u00e4 saa sen n\u00e4ytt\u00e4m\u00e4\u00e4n hieman tungosta. Yksi ratkaisu, jota voit k\u00e4ytt\u00e4\u00e4, on piilottaa joitakin sarakkeita, jotta ne n\u00e4ytt\u00e4v\u00e4t hyv\u00e4lt\u00e4 sivulla.<\/p>\n T\u00e4t\u00e4 varten voit k\u00e4ytt\u00e4\u00e4 Master-detail taulukoita<\/a>, lis\u00e4osaa, jonka avulla voit n\u00e4ytt\u00e4\u00e4 piilotetut sarakkeet yhdell\u00e4 napsautuksella, mik\u00e4 parantaa sivusi k\u00e4ytt\u00f6kokemusta.<\/p>\n Esitetyss\u00e4 esimerkiss\u00e4 luomme tilastotaulukon tiedoista, jotka meill\u00e4 on MySQL-tietokantataulukossa. Aiomme tarkistaa taulukkomme etuk\u00e4teen phpMyAdminissa ja se n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n Nyt wpDataTablesissa k\u00e4yt\u00e4mme ohjatun taulukkotoiminnon toista vaihtoehtoa (Luo tietotaulukko linkitettyn\u00e4 olemassa olevaan tietol\u00e4hteeseen) ja valitsemme tietol\u00e4hteeksi "SQL-kyselyn".<\/p>\n Lis\u00e4\u00e4mme SQL-editoriin kyselyn, joka n\u00e4ytt\u00e4\u00e4 kaikki t\u00e4m\u00e4n taulukon sarakkeet:<\/p>\n Napsauta sitten "Tallenna muutokset" -painiketta ja taulukko luodaan.<\/p>\n Sinulla on yksityiskohtaiset ohjeet t\u00e4st\u00e4 prosessista MySQL-pohjaisten wpDataTable-taulukoiden luomista koskevissa asiakirjoissamme<\/a>.<\/p>\n Sivuhuomautuksena, jos sinulla ei ole p\u00e4\u00e4sy\u00e4 tietokantaasi phpMyAdminin tai vastaavan kautta tai et vain ole perehtynyt kyselyjen luomiseen, voit k\u00e4ytt\u00e4\u00e4 wpDataTables sis\u00e4\u00e4nrakennettua WPDB-kyselyn rakentajaa.<\/p>\n Siin\u00e4 on graafinen k\u00e4ytt\u00f6liittym\u00e4, jonka avulla voit valita tarvitsemasi taulukot ja sarakkeet ja tuottaa kyselyn ja esikatselun. Voit muokata kysely\u00e4 tarpeen mukaan ja luoda wpDataTable-tiedoston muokatun kyselyn perusteella.<\/p>\n L\u00f6yd\u00e4t asiakirjoistamme yksityiskohtaiset ohjeet t\u00e4h\u00e4n: Luo MySQL-kyselypohjainen taulukko tekem\u00e4ll\u00e4 kysely tietokannasta<\/a>.<\/p>\n Selv\u00e4, jatketaan tilastotaulukoiden luomista koskevia ohjeita.<\/p>\n Nyt meid\u00e4n on mukautettava taulukkoa, kuten piilotettava sarake<\/a> wdt_ID, otettava reagointitoiminto<\/a> k\u00e4ytt\u00f6\u00f6n ja asetettava kaikki sarakkeet piilotettaviksi mobiili- ja tablet-laitteissa, paitsi Nimike ja Voitto-sarake.<\/p>\n Tulo-, Kustannus- ja Voitto-sarakkeissa voit k\u00e4ytt\u00e4\u00e4 solun v\u00e4rin mukauttamista ehdollisen muotoilun<\/a> avulla .<\/p>\n Tulot-sarakkeelle asetetaan kaksi ehtoa:<\/p>\n 1) jos solujen arvot ovat suurempia kuin nolla, aseta solun v\u00e4riksi #0083c2<\/p>\n 2) jos solujen arvot ovat suurempia kuin nolla, aseta solun CSS-luokka valkoiseksi tekstiksi.<\/p>\n Sitten luomme n\u00e4m\u00e4 luokat "Muokattu"-v\u00e4lilehden "Custom CSS" -kentt\u00e4\u00e4n taulukkoasetuksissa seuraavasti:<\/p>\n Kun numero 1 .wpDataTable-1:ss\u00e4 on taulukosi tunnus, joten sinun on vaihdettava se taulukkoasi varten.<\/p>\n Teemme samoin Kustannus-sarakkeelle, paitsi ett\u00e4 asetamme ehtoarvon v\u00e4riksi punaisen (#D9534F)<\/p>\n Ja my\u00f6s Voitto-sarakkeelle, paitsi ett\u00e4 asetamme ehtoarvon v\u00e4riksi vihre\u00e4ksi (#5CB85C)<\/p>\n Kaikissa kolmessa sarakkeessa (Tuotot, Kustannukset ja Voitto) k\u00e4yt\u00f6ss\u00e4 oleva soluetuliite on asetettu valuutaksi $. Kunkin sarakkeen Sarake-asetusten N\u00e4ytt\u00f6-v\u00e4lilehden Solun sis\u00e4ll\u00f6n etuliite on valittuna.<\/p>\n Jos haluat tiet\u00e4\u00e4 t\u00e4st\u00e4 lis\u00e4\u00e4, tutustu valuutta-, prosentti- ja muita sarakkeita<\/a> koskeviin asiakirjoihimme .<\/p>\n Ja siin\u00e4 se!<\/p>\n Joo, se on niin helppoa.<\/p>\n Taulukko on valmis julkaistavaksi julkaisussasi tai sivuillasi. Nyt sinun on teht\u00e4v\u00e4 se, ett\u00e4 se n\u00e4kyy sivuillasi k\u00e4ytt\u00f6liittym\u00e4ss\u00e4. Kuten muissakin laajennuksissa, k\u00e4yt\u00e4mme lyhytkoodeja taulukoiden n\u00e4ytt\u00e4miseen k\u00e4ytt\u00e4jien sivuilla tai viesteiss\u00e4.<\/p>\n Lyhytkoodien lis\u00e4\u00e4minen<\/a> on helppoa, varsinkin jos k\u00e4yt\u00e4t suosittuja sivujen rakentajia, kuten Elementor, WP Bakery tai Gutenberg.<\/p>\n Muuten, jos tarvitset lis\u00e4\u00e4 ominaisuuksia tilastotaulukoihisi, voit tarkistaa seuraavat oppaat, jotka auttavat:<\/p>\n Voit mukauttaa tilastotaulukoita helposti wpDataTablesilla.<\/p>\n Selv\u00e4, nyt meid\u00e4n on n\u00e4ytett\u00e4v\u00e4 saamamme tiedot kaavioina.<\/p>\n Aiomme luoda ympyr\u00e4kaavion. T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme Highcharts-<\/a> kirjastoa. On my\u00f6s kaksi muuta vaihtoehtoa mieltymystesi mukaan: Google Charts<\/a> ja Chartjs<\/a>.<\/p>\n Kun olet tehnyt yksinkertaisen kaavion asennuksen<\/a>, saat tilastotiedoistasi kauniita kaavioita.<\/p>\n N\u00e4et, ett\u00e4 kun teet t\u00e4m\u00e4n, wpDataTables n\u00e4ytt\u00e4\u00e4 luettelon mahdollisista kaaviotyypeist\u00e4. Luettelo riippuu k\u00e4ytt\u00e4m\u00e4st\u00e4si kaaviokoneesta.<\/p>\n Kun saavutamme "Datal\u00e4hde" \u200b\u200b-vaiheen, meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 tilastotaulukko, jonka olemme jo luoneet k\u00e4ytett\u00e4v\u00e4ksi t\u00e4m\u00e4n kaavion tietol\u00e4hteen\u00e4.<\/p>\n Nyt kun olemme "Data range" -vaiheessa, meid\u00e4n on annettava kaavion tietoalue.<\/p>\n Voit tehd\u00e4 t\u00e4m\u00e4n vet\u00e4m\u00e4ll\u00e4 ja pudottamalla tarvitsemamme sarakkeet tai k\u00e4ytt\u00e4m\u00e4ll\u00e4 vain nuolipainikkeita. Valitsimme Kohteet- ja Tulo-sarakkeet. T\u00e4ss\u00e4 vaiheessa asetamme my\u00f6s Seuraa taulukon suodatusta<\/a> -vaihtoehdon, jotta meill\u00e4 on dynaamisia kaavioita taulukoiden lajittelun ja suodatuksen j\u00e4lkeen.<\/p>\n On hyv\u00e4 muistaa, ett\u00e4 wpDataChartsissa voit k\u00e4ytt\u00e4\u00e4 vain yht\u00e4 merkkijonotyyppist\u00e4 saraketta (merkkijono, p\u00e4iv\u00e4m\u00e4\u00e4r\u00e4, s\u00e4hk\u00f6posti), kun taas kaikkien muiden on oltava kokonaislukuja tai kelluvia.<\/p>\n Seuraava askel, joka meid\u00e4n on otettava, on "Muotoilu ja esikatselu". Tehdyt muutokset n\u00e4kyv\u00e4t v\u00e4litt\u00f6m\u00e4sti kaaviossa, joka n\u00e4ytet\u00e4\u00e4n n\u00e4yt\u00f6n oikealla puolella.<\/p>\n Muotoiluvaihe on jaettu luokkiin, jotka edustavat erilaisia \u200b\u200bkaavion elementtej\u00e4.<\/p>\n T\u00e4\u00e4ll\u00e4 voimme muokata kaavioita tarpeen mukaan. Voimme asettaa responsiivisen leveyden, ryhmittelyn, erilaisia \u200b\u200bmukautusvaihtoehtoja asettelua, ty\u00f6kaluvihjeit\u00e4, vienti\u00e4 ja paljon muuta. Kun olemme lopettaneet, napsauta "Tallenna kaavio" -painiketta.<\/p>\n Viimeinen vaihe on "Tallenna ja hanki lyhytkoodi", jossa kaavio on valmis. Sinun tarvitsee vain kopioida t\u00e4m\u00e4 lyhytkoodi ja lis\u00e4t\u00e4 se samalle sivulle tai viestiin, johon lis\u00e4sit tilastotaulukon.<\/p>\n Aiomme luoda toisen kaavion uudelleen Highchart-kirjaston avulla. T\u00e4ll\u00e4 kertaa valitsemme Pinottu aluekaaviotyypin.<\/p>\n "Tietol\u00e4hde"-vaiheessa m\u00e4\u00e4rit\u00e4mme tilastotaulukon, joka on sama kuin ympyr\u00e4kaaviossa.<\/p>\n "Tietoalue"-vaiheessa valitsemme Nimikkeet-, Tulo-, Kustannus- ja Voitto-sarakkeet.<\/p>\n "Seuraa taulukon suodatusta" -vaihtoehto on my\u00f6s k\u00e4yt\u00f6ss\u00e4.<\/p>\n "Muotoilu ja esikatselu" -vaiheessa asetamme asetukset, kuten responsiivinen leveys, ryhmittelykaavio, sarjan v\u00e4rit, mutta voit m\u00e4\u00e4ritt\u00e4\u00e4 ne eri tavalla tarpeidesi mukaan.<\/p>\n\n
![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee4b505f.png\")
<\/a><\/p>\nSELECT * FROM statistics_table<\/code><\/pre>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee63b493.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee8a7204.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eebe26c5.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}<\/code><\/pre>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eed74f6c.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eefd0112.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef18e88f.png\")
<\/a><\/p>\n\n
![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef36ae8f.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef51f1ea.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef6455b8.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef87fe1f.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efa64d74.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efcc29c4.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eff8c779.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f00ad5b0.png\")
<\/a><\/p>\n
![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f02ca95c.png\")
<\/a><\/p>\n![\"Kuinka](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f0581e29.png\")
<\/a><\/p>\n