Teremtő | Allan Jardine |
---|---|
Fejlesztette | Közösség |
Utolsó verzió | 1.10 |
Letét | github.com/DataTables |
Beírva | JavaScript , jQuery |
típus | JQuery könyvtár |
Engedély | MIT |
Weboldal | datatables.net |
A DataTables egy nyílt forráskódú jQuery plug-in a HTML- tábla dinamikussá tételéhez . Az Allan Jardine által MIT licenc alapján létrehozott , Javascriptben írt könyvtár valóban számos konfigurációt kínál az adatrácsok ergonómiájának javítása érdekében, különösen akkor, ha impozáns arányokkal rendelkeznek.
A cél az adattáblák, hogy javítsa a hozzáférhetőség , hogy az adatok a HTML táblázatok.
Valójában a táblázat formázás nélküli fő hátrányai:
Így az alap HTML tábla ergonómiája abszolút gyenge.
Ennek orvoslására kifejlesztették a beépülő modult. Funkciói a következő 2 típusú ember számára lesznek hasznosak:
Így a jQuery DataTables könyvtár főként a következő lehetőségeket kínálja:
Ez a lista nem teljes. A fejlesztői konfiguráció révén számos elem testreszabható.
Vegyük a következő helyzetet, hogy konkrétan bemutassuk ezeket a szempontokat. Képzeljen el egy fejlesztőt egy multinacionális cégnél . Az emberi erőforrások igazgatója meg akarja tudni nézni a vállalat személyzetének listáját, és minden egyes személy számára sok információt tartalmaz (név, keresztnév, életkor, beosztás, munkahely, fizetés stb.). A HyperText Markup nyelv használatával informatikusunk az alap adatrács felépítéséhez használt tábla címkét használja (lásd az alábbi képeket).
<body> ... <table> <thead> <!-- Définition de l'en-tête (nom des colonnes) --> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <!-- Données du tableau --> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> ... </tbody> </table> ... </body>Kis CSS-formázással a fejlesztő javíthatja vizuális megjelenését. De a DataTables plug-in tiszta alapformázást kínál, és mindenekelőtt egy nagyon kellemes felületet, amely megoldja a fent említett problémákat.
A DataTables funkcionalitásának HTML-táblánkra történő alkalmazásához hozzá kell adnunk a következő sorokat a blokkokhoz headés body :
<head> ... <!-- Importation des règles de mise en page basique de DataTables --> <link rel="stylesheet" href="https://cdn.datatables.net/w/dt/dt-1.10.19/datatables.min.css"> </head> <body> ... <table id="example"> ... <!-- Partie inchangée. Voir code précédent. --> </table> ... <!-- Importation de la bibliothèque jQuery (sur laquelle DataTables se base) --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Importation du plug-in DataTables --> <script type="text/javascript" src="https://cdn.datatables.net/w/dt/dt-1.10.19/datatables.min.js"></script> <!-- Script pour appliquer DataTables au tableau ci-dessus --> <script> $('#example').DataTable(); </script> </body>Ezeknek a kiegészítéseknek az eredménye ellentétes. A táblázat tartalma nem változott, de az adatok formázása nagymértékben javult.
Először maga a táblázat sokkal kevesebb helyet foglal el, a lapozásnak köszönhetően. A jobb alsó sarokban egy gombsor található az oldalak közötti mozgatáshoz, és a bal alsó sarokban található szöveg megemlíti a felhasználó helyzetét a táblázatban.
Ezután a bal felső sarokban található választó lehetőséget kínál további sorok megjelenítésére az egyes oldalakon.
Végül, és nem utolsósorban, az interfész tetején szűrő és válogató eszközök találhatók. Alapértelmezés szerint a táblázat az első oszlopban növekvő sorrendben vagy ábécé sorrendben van rendezve, de a rendezés megváltoztatható és megfordítható az oszlopok nevére történő egyszerű kattintással. Ezenkívül egy szövegrészlet beírása a keresősávba eltávolítja azokat a sorokat, amelyek egyáltalán nem tartalmazzák a karakterláncot.
Ezeket a szolgáltatásokat úgy kapjuk meg, hogy a metódust DataTable()minden formátum nélkül meghívjuk egy jQuery tömbben. Ezeket automatikusan a plug-in forráskódja generálja, amelyet a metódus meghívása előtt importálnak a HTML-törzsbe. Az automatizálást a táblával való interakció is szabályozza, mivel az interfész minden eleme minden egyes kattintáskor és bejegyzéskor frissül, az alapadatoknak megfelelően.
CSS / JS fájlok keretrendszerből történő importálásával, vagy saját maga létrehozásával lehetővé válik a táblák elrendezésének testreszabása. A DataTables számos olyan keretrendszerrel kompatibilis, mint például a Boostrap , az Foundation , a Semantic UI , a jQuery UI ThemeRoller, az Material Design vagy akár az UIKit 3, amely lehetővé teszi az asztalok alakjának adaptálását a webhely többi részéhez.
A lehetőségek nagyszerűek, kezdve a vonalak egyszerű váltakozó színezésétől vagy az egérrel történő színezésig, a függőleges vagy vízszintes görgetősávok hozzáadásáig, valamint több tábla "fülek" (francia nyelven "fülek") felhelyezéséig. ).
A webhely programozási környezetétől függően előfordulhat, hogy importálhatja a DataTables forráskódjait a DataTables CDN tartalomszolgáltató hálózaton keresztül , vagy helyileg letöltheti azokat. A plug-in hivatalos weboldala egy letöltés-készítőt kínál, amely lehetővé teszi a csomagok importálását az előre választott opcióknak megfelelően (formázási keretrendszer, kiterjesztések stb.).
A DataTables alapvető felhasználása kiegészíthető az előzőleg importálandó bővítmények hozzáadásával, amelyek aktiválását a konfigurációkban kell leggyakrabban deklarálni. A hivatalos webhely bemutatja ezeknek a bővítményeknek a telepítését és beállításait, amelyek közül a legfontosabbak:
Kiterjesztés | Ingyenes? | Leírás |
---|---|---|
Automatikus kitöltés | ✔ | Hozzáadja a cellák tartalmának áthúzását, hogy másokra másolhassa, például egy Excel- táblázatba vagy a Google Táblázatokba . |
Gombok | ✔ | Lehetővé teszi exportgombok ( CSV , PDF , Excel ) hozzáadását a táblához. |
ColReorder | ✔ | Lehetőséget kínál a végfelhasználó számára az oszlopok sorrendjének megváltoztatásához, húzással. |
Válassza a lehetőséget | ✔ | Többféle választási lehetőséggel ez a kiterjesztés megnyitja az utat a DataTables szerkesztéséhez. |
Szerkesztő | ✗ | A táblázatok összes eszközét tartalmazza, például egyszeri vagy többszöri szerkesztést modális ablakon keresztül, sorok hozzáadását vagy törlését. 15 napos ingyenes próbaidőszak lehetséges. |
FixedColumns | ✔ | Lehetővé teszi egy vagy több oszlop vagy a táblázat fejlécének beállítását, vagyis akkor is láthatóak maradnak, ha egérrel görgetjük a tartalmat. |
FixedHeader | ✔ | |
KeyTable | ✔ | Lehetővé teszi az asztal és a billentyűzet közötti interakciót, például a táblázatok használatát. |
Fogékony | ✔ | Az oszlopok dinamikus beillesztésével vagy törlésével ez a kiterjesztés a képernyő méretének megfelelően optimalizálja a táblázatok megjelenítését. |
RowGroup | ✔ | Sorok hozzáadása egy sorcsoport adatainak összefoglalásához. Egy kritériumtól (oszloptól) függően a csoportok lehetővé teszik különösen a táblázat részösszegeinek kiszámítását. |
RowReorder | ✔ | A végfelhasználó használhatja a vonalak sorrendjének megváltoztatására húzással. |
Tekercs | ✔ | Hasznos, ha az oszlopok és sorok száma nagy. Anélkül, hogy folyamatosan változtatnánk és változtatnánk az oldalakat, és főleg annak érdekében, hogy több oszlop számára helyet biztosítsunk, a gördítősávok javíthatják a nagy táblák megtekintését. |