V\u00e5rt plugin har n\u00e5gra funktioner som du kan anv\u00e4nda, beroende p\u00e5 vilken datak\u00e4lla du har.<\/p>\n
Om du beh\u00f6ver skapa en tabell fr\u00e5n b\u00f6rjan rekommenderar vi att du skapar en tabell manuellt<\/a>. Detta \u00e4r en av de vanligaste anv\u00e4ndningsomr\u00e5dena f\u00f6r wpDataTables: att skapa tabeller och fylla dem med data h\u00e4mtade fr\u00e5n WordPress adminpanel, utan att komma \u00e5t eller ha n\u00e5gon befintlig datak\u00e4lla tillg\u00e4nglig (Excel, CSV, Google Spreadsheet, JSON, XML, MySQL DB, etc.).<\/p>\n Om du d\u00e4remot vill skapa en tabell fr\u00e5n en viss datak\u00e4lla kan dessa guider hj\u00e4lpa dig att komma ig\u00e5ng med wpDataTables:<\/p>\n L\u00e5t oss nu g\u00e5 vidare och s\u00e4ga att du har m\u00e5nga kolumner i statistiktabellen som du vill presentera p\u00e5 din webbplats. Uppenbarligen kommer detta att f\u00e5 det att se lite tr\u00e5ngt ut. Den enda l\u00f6sningen som du kan anv\u00e4nda \u00e4r att d\u00f6lja n\u00e5gra kolumner s\u00e5 att det ser bra ut p\u00e5 sidan.<\/p>\n F\u00f6r det kan du anv\u00e4nda Master-detail-tabellerna<\/a>, ett till\u00e4gg som l\u00e5ter dig visa dolda kolumner med ett klick s\u00e5 att det f\u00f6rb\u00e4ttrar din sidas anv\u00e4ndarupplevelse.<\/p>\n I exemplet som vi kommer att visa dig skapar vi en statistisk tabell fr\u00e5n data som vi har i en MySQL-databastabell. Vi kommer att kontrollera v\u00e5r tabell i f\u00f6rv\u00e4g i phpMyAdmin och det ser ut s\u00e5 h\u00e4r:<\/p>\n Nu, i wpDataTables, anv\u00e4nder vi det andra alternativet i tabellguiden (Skapa en datatabell kopplad till en befintlig datak\u00e4lla) och vi v\u00e4ljer "SQL-fr\u00e5ga" som datak\u00e4lla.<\/p>\n I SQL-editorn infogar vi en fr\u00e5ga f\u00f6r att visa alla kolumner fr\u00e5n den h\u00e4r tabellen:<\/p>\n Sedan klickar vi p\u00e5 knappen "Spara \u00e4ndringar" och tabellen skapas.<\/p>\n Du har detaljerade instruktioner om denna process i v\u00e5ra dokument f\u00f6r att skapa MySQL-baserade wpDataTables<\/a>.<\/p>\n Som en sidoanteckning, om du inte har tillg\u00e5ng till din databas via phpMyAdmin eller n\u00e5got liknande, eller om du helt enkelt inte \u00e4r bekant med att skapa fr\u00e5gor, kan du anv\u00e4nda wpDataTables inbyggda WPDB-fr\u00e5gekonstruktor.<\/p>\n Den har ett grafiskt anv\u00e4ndargr\u00e4nssnitt som l\u00e5ter dig v\u00e4lja tabeller och kolumner som du beh\u00f6ver och genererar en fr\u00e5ga och en f\u00f6rhandsvisning. Du kan \u00e4ndra fr\u00e5gan efter behov och skapa en wpDataTable baserat p\u00e5 den \u00e4ndrade fr\u00e5gan.<\/p>\n Du kan hitta detaljerade instruktioner om detta i v\u00e5ra dokument: Skapa en MySQL-fr\u00e5gebaserad tabell genom att fr\u00e5ga en databas<\/a>.<\/p>\n Okej, l\u00e5t oss g\u00e5 vidare med riktlinjerna f\u00f6r att skapa statistiska tabeller.<\/p>\n Nu m\u00e5ste vi g\u00f6ra lite tabellanpassning som att d\u00f6lja kolumnen<\/a> wdt_ID, aktivera responsivitetsalternativet<\/a> och st\u00e4lla in alla kolumner f\u00f6r att vara dolda p\u00e5 mobila enheter och surfplattor, f\u00f6rutom kolumnen Artikel och Vinst.<\/p>\n F\u00f6r kolumnerna Int\u00e4kt, Kostnad och Vinst kan du anv\u00e4nda viss cellf\u00e4rgsanpassning med villkorlig formatering<\/a>.<\/p>\n F\u00f6r kolumnen Int\u00e4kt st\u00e4ller vi in \u200b\u200btv\u00e5 villkor:<\/p>\n 1) om cellv\u00e4rdena \u00e4r h\u00f6gre \u00e4n noll, st\u00e4ll in cellf\u00e4rg till #0083c2<\/p>\n 2) om cellv\u00e4rdena \u00e4r h\u00f6gre \u00e4n noll, st\u00e4ll in cell CSS-klass till vit-text.<\/p>\n Sedan skapar vi dessa klasser i f\u00e4ltet "Anpassad CSS" p\u00e5 fliken "Anpassa" i tabellinst\u00e4llningar s\u00e5 h\u00e4r:<\/p>\n D\u00e4r nummer 1 i .wpDataTable-1 \u00e4r ditt bords ID s\u00e5 du m\u00e5ste \u00e4ndra det f\u00f6r din tabell.<\/p>\n Vi g\u00f6r samma sak f\u00f6r kolumnen Kostnad f\u00f6rutom att vi st\u00e4ller in f\u00e4rgen i villkorsv\u00e4rdet till r\u00f6tt (#D9534F)<\/p>\n Och \u00e4ven f\u00f6r vinstkolumnen, f\u00f6rutom det faktum att vi st\u00e4ller in f\u00e4rgen i tillst\u00e5ndsv\u00e4rdet till gr\u00f6nt (#5CB85C)<\/p>\n I alla tre kolumnerna (Int\u00e4kt, Kostnad och Vinst) \u00e4r cellprefixet som vi har satt till valutan $ med alternativet "Cellinneh\u00e5llsprefix" p\u00e5 fliken Visa i kolumninst\u00e4llningarna f\u00f6r varje kolumn.<\/p>\n Om du vill veta mer om detta, kolla in v\u00e5ra dokument om valuta, procent och andra kolumner<\/a>.<\/p>\n Och det \u00e4r allt!<\/p>\n Japp, det \u00e4r s\u00e5 enkelt.<\/p>\n Tabellen \u00e4r redo f\u00f6r publicering p\u00e5 ditt inl\u00e4gg eller dina sidor. Vad du nu beh\u00f6ver g\u00f6ra \u00e4r att det ska dyka upp p\u00e5 dina sidor i front-end. Som med alla andra plugin anv\u00e4nder vi kortkoder f\u00f6r att visa tabeller p\u00e5 anv\u00e4ndarnas sidor eller inl\u00e4gg.<\/p>\n Det \u00e4r enkelt att l\u00e4gga till kortkoder<\/a>, s\u00e4rskilt om du anv\u00e4nder popul\u00e4ra sidbyggare som Elementor, WP Bakery eller Gutenberg.<\/p>\n F\u00f6rresten, om du beh\u00f6ver fler funktioner f\u00f6r dina statistiska tabeller kan du kolla f\u00f6ljande guider som hj\u00e4lper dig:<\/p>\n Du kan enkelt anpassa dina statistiska tabeller med wpDataTables.<\/p>\n Okej, vad vi nu beh\u00f6ver g\u00f6ra \u00e4r att visa data vi har som diagram.<\/p>\n Vi ska skapa ett cirkeldiagram. F\u00f6r den h\u00e4r kommer vi att anv\u00e4nda Highcharts-<\/a> biblioteket. Det finns ocks\u00e5 tv\u00e5 andra alternativ, beroende p\u00e5 dina preferenser: Google Charts<\/a> och Chartjs<\/a>.<\/p>\n Efter att ha gjort en enkel diagraminst\u00e4llning<\/a> kommer du att sluta med vackra diagram fr\u00e5n dina statistiska data.<\/p>\n Du kommer att se att n\u00e4r du g\u00f6r detta kommer wpDataTables att visa en lista \u00f6ver m\u00f6jliga diagramtyper, listan beror p\u00e5 vilken diagrammotor du anv\u00e4nder.<\/p>\n N\u00e4r vi n\u00e5r steget "Datak\u00e4lla" m\u00e5ste vi definiera den statistiska tabellen som vi redan skapat f\u00f6r att anv\u00e4ndas som datak\u00e4lla f\u00f6r detta diagram.<\/p>\n Nu n\u00e4r vi \u00e4r p\u00e5 steget "Dataintervall", m\u00e5ste vi ange dataintervallet f\u00f6r diagrammet.<\/p>\n F\u00f6r att g\u00f6ra det drar vi helt enkelt och sl\u00e4pper de kolumner som vi beh\u00f6ver eller anv\u00e4nder bara pilknapparna. Vi valde kolumnerna Artiklar och Int\u00e4kter. I det h\u00e4r steget st\u00e4ller vi ocks\u00e5 in alternativet F\u00f6lj tabellfiltrering<\/a> s\u00e5 att vi har dynamiska diagram efter tabellsortering och filtrering.<\/p>\n En sak att vara medveten om \u00e4r att i wpDataCharts kan du bara anv\u00e4nda en kolumn av str\u00e4ngtyp (str\u00e4ng, datum, e-post) medan alla andra m\u00e5ste vara heltal eller flytande.<\/p>\n N\u00e4sta steg som vi m\u00e5ste ta \u00e4r "Formatera och f\u00f6rhandsgranska". \u00c4ndringar som g\u00f6rs syns direkt p\u00e5 diagrammet som \u00e5terges till h\u00f6ger p\u00e5 sk\u00e4rmen.<\/p>\n Formateringssteget \u00e4r indelat i kategorier som representerar olika diagramelement.<\/p>\n H\u00e4r kan vi anpassa diagrammen efter behov. Vi kan st\u00e4lla in en responsiv bredd, gruppering, olika anpassningsalternativ f\u00f6r layout, verktygstips, export och mer. N\u00e4r vi \u00e4r klara klickar du p\u00e5 knappen "Spara diagram".<\/p>\n Det sista steget \u00e4r "Spara och f\u00e5 kortkod" d\u00e4r ditt diagram \u00e4r klart. Allt du beh\u00f6ver g\u00f6ra \u00e4r att kopiera den kortkoden och infoga den p\u00e5 samma sida eller inl\u00e4gg d\u00e4r du infogade den statistiska tabellen.<\/p>\n Vi kommer att skapa ett andra diagram igen med Highchart-biblioteket. Den h\u00e4r g\u00e5ngen v\u00e4ljer vi diagramtypen Stacked area diagram.<\/p>\n I steget "Datak\u00e4lla" definierar vi en statistiktabell p\u00e5 samma s\u00e4tt som f\u00f6r ett cirkeldiagram.<\/p>\n I steget "Dataintervall" v\u00e4ljer vi kolumnerna Artiklar, Int\u00e4kter, Kostnad och Vinst.<\/p>\n Alternativet "F\u00f6lj tabellfiltrering" \u00e4r ocks\u00e5 aktiverat.<\/p>\n I steget "Formatera och f\u00f6rhandsgranska" st\u00e4ller vi in \u200b\u200balternativ som responsiv bredd, grupperingsdiagram, f\u00e4rger f\u00f6r serier, men du kan st\u00e4lla in det annorlunda f\u00f6r dina behov.<\/p>\n\n
![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee4b505f.png\")
<\/a><\/p>\nSELECT * FROM statistics_table<\/code><\/pre>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee63b493.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ee8a7204.png\")
<\/a><\/p>\n![\"Hur](\"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![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eed74f6c.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eefd0112.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef18e88f.png\")
<\/a><\/p>\n\n
![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef36ae8f.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef51f1ea.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef6455b8.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89ef87fe1f.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efa64d74.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89efcc29c4.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89eff8c779.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f00ad5b0.png\")
<\/a><\/p>\n
![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f02ca95c.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-190587-61e89f0581e29.png\")
<\/a><\/p>\n