Skapa fantastiska responsiva tabeller i WordPress med wpDataTables

Det är enkelt att skapa tabeller i WordPress. Det finns traditionella sätt att lägga till tabeller till WordPress med kod, men det överlägset mest praktiska sättet att bygga en tabell (eller diagram) är med wpDataTables WordPress-plugin. Det gör det extremt enkelt att importera ditt bord från olika externa källor, utforma det till din smak och lägga till det på din webbplats.


Grundläggande HTML-tabeller

Du kan lägga till tabeller till WordPress med standard HTML-tabell taggar. De är ganska raka fram och använder följande grundstruktur (kom bara ihåg att ange dem i fliken “text” när du skapar ditt inlägg):

Först Andra Tredje
domkraft Jackson 25
Jane Jenson 30

Vilket kommer att resultera i en tabell som liknar den här (notera – all styling för de huvudceller beror på ditt tema):

FörstAndraTredje
domkraftJackson25
jenJenson30

Att använda HTML för att skapa dina tabeller fungerar och är bra om du bara vill lägga till en eller två tabeller till din webbplats. Men om du ofta skapar tabeller finns det några problem som du troligen kommer att stöta på.

  • Du måste lära dig HTML-kodning för avancerade alternativ
  • Att lägga till HTML är tidskrävande och kommer att hindra din produktivitet på lång sikt om du skapar många tabeller
  • Den här metoden är starkt begränsad i layout och design (såvida du inte är en avancerad utvecklare)

Om du använder WordPress kan vi säkert anta att 1) ​​du använder den senaste versionen av WordPress, och 2) ditt tema är lyhört. När du använder HTML-tabelltaggen för att infoga tabeller på din WordPress-webbplats kommer du att spendera mycket tid på att justera layouten.

Din webbplats kan vara lyhörd, men dina tabeller är det inte.

Detta skulle naturligtvis bryta den känsliga egenskapen på din webbplats. Att infoga data till din webbplats kan också vara ett problem. Program för bearbetning av kalkylblad som Google Spreadsheets eller Microsoft Excel har många importverktyg för att hämta data från en databas. Men när du skriver varje karaktär är det inte så produktivt.

Tidigare identifierade vi tre huvudfrågor som infogade tabeller med HTML i WordPress. Oroa dig inte – det finns ett mycket bättre sätt att skapa tabeller. Så låt mig introducera ett plugin som kommer att undanröja alla ovannämnda problem och ta med en mängd användbara funktioner.

Skapa bättre tabeller med wpDataTables

wpDataTables Responsive Tables Plugin

För att skapa tabeller med WordPress rekommenderar vi starkt wpDataTables. Detta helt responsiva premium-plugin gör det enkelt att skapa, anpassa och hantera tabeller och diagram i WordPress – ingen kodning krävs. Installera och börja bygga tabeller och diagram! Lita av mer än 14 300 personer (och tidigare kallade det en av våra WordPress-plugins i månaden) är det helt enkelt ett av de bästa sätten att lägga till tabeller till din WordPress-drivna webbplats enligt vår ödmjuka åsikt.

Mer om wpDataTables Visa Live Demo

Du kan lära dig mer om wpDataTables på Themeforest genom att klicka på knapparna ovan eller fortsätta läsa för att ta reda på varför vi tycker det är så fantastiskt.

Flera datakällor

wpDataTables Datakällor

Beroende på var du föredrar att lagra dina data, med wpDataTables kan du importera från många olika källor. Välj mellan Excel, CSV, Google Doc, XML, JSON, Serialized PHP Array eller en MySQL-fråga för att importera data. Det finns också alternativ för att skapa en ny tabell manuellt, länka till en live datakälla (som till en dynamisk uppdatering av tabellen när du laddar den på en sida) eller generera en anpassad fråga med ett GUI (grafiskt användargränssnitt) verktyg.

MySQL-frågan är min personliga favorit eftersom den låter mig se och modifiera data från en korrekt databas. Om du har ett team av utvecklare som arbetar på ett bordprojekt skulle detta göra samarbetet super enkelt (mer om detta senare)!

Förbättrad anpassning och responsiv layout

Att designa ditt bord har aldrig varit lättare. Med några kryssrutor och ett par färgval kan du designa pluginprogrammet så att det kompletterar webbplatsens tema. Ta en titt på de fantastiska designfunktionerna som plugin-programmet har att erbjuda:

wpDataTables Anpassad styling

Det finns också inbyggda alternativ för gränssnittsspråk, formatering av tid / datum, justeringar, anpassad JS / CSS och mer. Åh och nämnde jag att plugin-enheten också är mobilkänslig? Du kan ange hur mycket utrymme bordet kommer att förbruka, oavsett skärmstorlek!

Filter för effektiv sökning

wpDataTables Sortera & filtrera alternativ

När du skapar en ny tabell (eller redigerar en existerande tabell) kan du aktivera filter. Med filter kan du minska din resultatsats med bara de objekt du vill ha. Detta är oerhört användbart för att fråga en stor databas. Om du till exempel har en biblioteksdatabas så filtrerar du resultat baserat på ämne skulle hjälpa dig hitta din bok mycket snabbare.

Men eftersom varje gång du redigerar ett filter ökar det antalet beräkningar som ska göras av databasen – och därmed ökar servertrycket. Därför har du det söta alternativet att inaktivera filtren helt.

Redigera MySQL-databas från Frontend

wpDataTables Tillåter redigering i front

wpDataTables låter dig också redigera dina databaser direkt från frontend – dvs från den levande WordPress-webbplatsen. Aktivera helt enkelt alternativet under fliken “Redigering” när du konfigurerar ditt bord. Du kan till och med ange vilka användare som kan redigera värdena i databasen – vilket lämnar det öppet för alla användare att skicka in eller basera åtkomst på sin användarroll.

Visualisera data med hjälp av diagram

Visualisering är en mycket effektiv uppmärksamhet än vanlig text. När allt kommer omkring är att se att tro. den ökar vår frekvens av dataintag, jämfört med traditionell läsning. När du till exempel tittar på ett cirkeldiagram över en årlig inkomstrapport kommer du nästan alltid att tolka uppgifterna snabbare jämfört med att läsa uppgifterna i alla tolv månader..

wpDataTables Chart Styles

wpDataTables hjälper dig att skapa dynamiska diagram (via Google-diagram, HighCharts eller Chart.js) för att visualisera dina tabells data. Detta är särskilt användbart för tabeller med mycket numerisk data, till exempel bloggare som delar sina månatliga inkomstrapporter.

Livstidsuppdateringar

De flesta plugin-utvecklare ger dig ett års uppdateringar och support. Emellertid har denna utvecklare inkluderat livstidsuppdateringar och sex månaders support för en engångsavgift (Obs – för fortsatt support måste du förnya din licens).

Detaljerad dokumentation

Utvecklaren lämnar ingen sten omvänd när det gäller att förklara hur man använder wpDataTables. Det finns en omfattande online-dokumentation plus videohandledning för att hjälpa dig förstå den fullständiga kapaciteten för plugin!

Detta berättar för oss två saker:

  1. Utvecklaren bryr sig om sina kunder – så att de kommer tillbaka för att köpa produkten
  2. En kunnig kund = mindre hicka = lägre supportbiljetter = nöjda kunder

Med mindre supportbiljetter kan utvecklaren ägna mer tid åt att förbättra plugin och introducera nyare funktioner!

Hur man bygger en responsiv tabell med wpDataTables

Nu när du vet varför vi tycker att wpDataTables är ett bra plugin, låt oss visa dig hur du använder det! Det finns exakt tre steg för att skapa en ny tabell med wpDataTables-plugin.

1. Installera wpDataTables

Jag vet att detta borde vara uppenbart, men du måste först installera wpDataTables. Eftersom detta är ett premium-plugin måste det köpas och laddas ner från CodeCanyon (gå bara till dina inköp och ladda ner “Installerbar WordPress-fil”).

Installera plugin för wpDataTables

Följ sedan instruktionerna på skärmen för att avsluta installationen och aktiveringen.

2. Skapa din datatabell

Med plugin aktivt bör du ha ett helt nytt menyobjekt “wpDataTables”. Klicka på den och klicka sedan på den stora blå Lägg till ny-knappen för att komma igång med att skapa en ny tabell.

wpDataTables Skapa eller importera tabell

Det första alternativet är hur du vill skapa ditt bord. Det bör finnas fem alternativ. Vi valde alternativet att importera från ett CVS eftersom vi hade ett enkelt kalkylblad som vi ville använda. Sedan efter att du klickat på Nästa kommer du att bli ombedd att välja och ladda upp din fil.

wpDataTables Hantera tabell

När du laddar upp din datakälla kan du ange ett anpassat tabellnamn samt använda alternativ för att redigera, lägga till eller ta bort kolumner och rader. Klicka sedan på den gröna knappen för att avsluta skapandet av ditt bord.

wpDataTables Tabellinställningar

Du är i hemsträckan nu! Från den här sidan kan du justera ytterligare inställningar för dina tabeller (valfritt). Använd “Display” -alternativ för att aktivera responsiv kollapsning på mindre enheter, lägg till en horisontell rullningslista, begränsa tabellbredden, etc. Gå till fliken “Redigering” för att aktivera redigering i front-end, eller aktivera tabellverktygen (skriva ut, kopiera eller exportera) snabblänkar). Bäst av allt kan du förhandsgranska dina redigeringar direkt när du gör tweaks. Kom bara ihåg att klicka på Spara (eller tillämpa) bock om du gör några ändringar.

När du är klar kopierar du tabellkortkoden från toppen av skärmen eftersom du behöver den för det tredje och sista steget.

3. Sätt in ditt bord i en post eller sida

wpDataTables Shortcode

För att använda din tabell behöver du bara klistra in kortkoden i innehållet på ett inlägg eller en sida (som på bilden ovan). Den här kortkoden kommer att visas på framsidan av din webbplats beroende på hur du har utformat ditt bord:

wpDataTables Front-end Table

I vårt kan du se att vi har aktiverat tabellverktygen (för att skriva ut, exportera, etc.), filtrering och inlämningar i front-end. Men det är det – ditt bord är redo att gå!

Vill bygga ett diagram?

Du kan också bygga diagram med wpDataTables. När du har skapat ditt bord klickar du på “Skapa ett diagram” för att starta.

wpDataTables Skapa diagram

Härifrån ge ditt diagram ett namn, välj en stil (det finns massor att välja mellan) och fortsätt till nästa skärm där du väljer datatabellen du vill använda för att skapa ditt diagram.

wpDataTables Tilldela data

När du har valt tabellen att använda som datakälla tilldelar du tabellkolumnerna till delarna av diagrammet. Beroende på vilket diagram du väljer kan det finnas ett minimumantal värden som krävs. I vårt exempel valde vi ett stapeldiagram, som krävde minst två kolumner för diagrammet (för att vara staplarna). När du har sorterat kolumnerna går du vidare till nästa steg.

wpDataTables Anpassa diagram

Nu för den roliga delen. Använd alternativen för att utforma och lägga till funktioner i ditt diagram. Det finns massor av alternativ för responsiv bredd, höjd, bakgrunder, gränser, teckensnitt, etiketter, färger, visa / dölj titel, verktygstips på musen och mer.

När du är klar med redigeringen klickar du på nästa och kopierar din kortkod. Klistra in det i ditt inlägg eller sidinnehåll, spara och gå till framsidan av din webbplats för att se ditt diagram!

Lägg till fler WordPress-tabellfunktioner

Vill ha mer? Det finns ett antal tillägg och tillägg för wpDataTables för att lägga till ännu fler tabell- och diagramalternativ för din WordPress-webbplats.

wpDataTables Avancerade filter

Kraftfulla filter: Ställ in kaskadfilter (vänster till höger sammansatta) filter, fasetterad filtrering (tillämpa flera filter på smala resultat), inaktivera tabellvy tills användaren har valt filter, lägg till en live-sökfunktioner och mer. Aktivera och konfigurera bara alternativet när du ställer in ditt bord.

Report Builder: Generera dina egna anpassade Word- eller Excel-rapporter baserade på datatabeller. Detta är särskilt användbart när du tillåter front-end-redigering av användare (så att du samlar in data kan du köra igen och skriva ut rapporter) eller om du behöver regenerera rapporter regelbundet (som månatliga fakturor eller tidskort).

wpDataTables Formidable Forms

Formidabla formulär: Lägg till stöd för den populära Formidable Forms Pro formbyggaren. Använd Formidable Forms för att skapa ett datainsamlingsformulär (som en undersökning) och generera sedan en tabell automatiskt baserat på användarinlämningar, där varje fält konverteras till en kolumn.

Gravity Forms: Integrera Gravity Forms-inlämningar med wpDataTables för att automatiskt skapa WordPress-tabeller baserade på användardata. Tillägget lägger till en ny datakälla när du skapar din tabell så det är enkelt att länka till ditt specifika Gravity Form och visualisera data.

Prova wpDataTables för dig själv

wpDataTables Live Sandbox

De flesta utvecklare ger dig en live-demo för att ge dig en känsla av vad plugin kan göra. Men de visar bara utdata, dvs “frontend” -vyn – som är baserad på förutbestämda ingångar. Det är här de flesta live-demonstrationer av plugin kommer till kort – de ger dig inte tillgång till insticksinställningarna och verktygen – dvs backend.

wpDataTables erbjuder dig dock en fullständig sandlåda på deras demo där du kan PROVA INNAN DU KÖPER. Alla bilhandlare gör detta – den ökända testkörningen. Via sandlådan kan du testa insticksfunktionerna till ditt hjärtas innehåll och se utdata i realtid.

Visa wpDataTables-demonstrationen

Vill du ladda ner en kopia för att testa din egen installation? wpDataTables erbjuder en lite version som du kan hämta från WordPress.org-arkivet. Det har inte alla fantastiska premiumfunktioner som vi täckte ovan, men det är ett utmärkt sätt att se om plugin-programmet kan vara den rätta lösningen för dina behov.

Skaffa wpDataTables Lite

Och om du gillar det kan du gå vidare och köpa det med fullständig sinnesfrid. Varför? Eftersom du redan har testat och använt produkten.

Slutsats

wpDataTables är ett av dessa oumbärliga plugins för WordPress-webbplatser som hanterar enorma mängder data. Oavsett om du skapar ett skolprojekt eller företagets årsrapport, spelar tabeller och deras visualisering en viktig roll i datarepresentationen.

Skaffa wpDataTables för WordPress

Har du provat wpDataTables? Eller har du några frågor om vad denna plugin kan göra? Lämna en kommentar nedan – vi vill gärna höra från dig!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me