Táblázatok - a plugin használatával
A plugin telepítése
A modern trendek és megközelítések a webfejlesztésben
Ismerje meg a gyors szakmai növekedés algoritmusát a helyszín építéséből
Ezután kattintson a Letöltés linkre:
A táblázat az adatbázisba kerül, és egy egyszerű szkript segítségével megjelenik a képernyőn (a lecke forrásanyagában láthatja ezt a szkriptet).
Ezután a script.js fájlban adja hozzá a következő kódot:
Ez azt jelenti, hogy a blokkot a táblázattal választjuk ki, és felhívjuk a módszert (). Mostantól frissítve az információkat a böngészőben, látni fogjuk, hogy lehetővé vált a táblák rendezése.
Plugin beállítások
A beépülő modul a következő beállításokat támogatja:
sortList - az alapértelmezett mezőket rendezi, az alábbi formában [x, n], ahol x a mezőindex (a mezők indexelése nulláról indul), az n a sortolási irány (0 a közvetlen irány, az 1 a fordított). Lehetőség van több sejt meghatározására [x, n], így a sorrend kiválasztása alapértelmezés szerint több mezőben történik;
sortForce - kényszerített válogatás. Bármelyik mezőt, amelyet a felhasználó rendez, az ebben a paraméterben kiválasztott mező mindig részt vesz a rendezésben;
widgetek - minden nem egyenletes vonal, egy adott színnel festve;
A modern trendek és megközelítések a webfejlesztésben
Ismerje meg a gyors szakmai növekedés algoritmusát a helyszín építéséből
cancelSelection - ha igaz, letiltja a szövegválasztást a táblázat fejlécében;
hibakeresés - hibakeresési mód;
fejlécek - a tulajdonság használatával letilthatja a rendezést a táblázat kiválasztott területein.
Pagination navigáció
A táblázat teljes tartalma, a monó több oldalra osztva, ezáltal javítva annak használatát. Ehhez vegye fel a következő HTML blokkot, amelyet a lapok navigációs oldalainak kezelőpaneljeként használ:
Ezután el kell hívnia a tablesoryPager () metódust:
Ebben az esetben adja meg a következő beállításokat:
méret - a táblázat sorainak száma egy oldalon;
konténer - az egység, amelyben a tábla navigációs vezérlőpanel található;
positionFixed - ha a TRUE értéket átadja, akkor a stílusok rögzített pozícióban lesznek megadva a lapozás navigációs vezérléséhez;
oldal - az alapértelmezés szerint megjelenítendő oldal;
cssNext - blokk gombként használható a következő oldalra lépéshez;
cssPrev - blokk, amelyet gombként használunk az előző oldalra lépéshez;
cssFirst-blokk, amelyet gombként az első oldalra akarunk menni;
cssLast-block, amelyet gombként az utolsó oldalra ugrik.
Most frissítjük az oldalt, látni fogjuk a következőket:
Ez lezárja ezt a leckét. Minden a legjobb neked és a jó kódolás.
A modern trendek és megközelítések a webfejlesztésben
Ismerje meg a gyors szakmai növekedés algoritmusát a helyszín építéséből
A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán
Gyakorold a HTML5 és a CSS3-at a semmiből az eredményhez!
Andrew, talán ez az, csak nem tudom megérteni, hogy hol az élő módszer a kódba kerül (a mellékelt könyvtár támogatja, ellenőriztem)? Kérem, mondja meg, ha a gomb id = »confirm_btn» (ha szükséges) a kód példa:
$ (dokumentum) .ready (függvény () $ ("# stat"). tablesorter (sortList: [[0,0]],
kütyü: ['zebra'],
cancelSelection: false,
widthFixed: igaz,
tablesorterPager (konténer: $ ('# pager'),
méret: 2,
pozícióFixed: hamis,
oldal: 0,
cssFirst: ".first",
cssLast: '.last',
cssNext: '.next',
cssPrev: '.prev',
>);
>);
Ebben a kódban nincs helye, és nincs szükség rá, mivel ez a kód a plugin meghívásához. Az eseményt át kell ruházni azon elemekre, amelyekben új elemek kerülnek hozzáadásra. Ebben az esetben, amennyire én értem, amikor egy gombra kattint, egy bizonyos tábla betöltődik. A tábla dinamikus elem, és fel kell delegálnia az eseményt. Ie Ez nem akkor történik meg, ha a plugint hívják, hanem amikor a tábla betöltődik.
Andrew, ha jól értem, az élőnek kapcsolódnia kell a gombhoz? Ha igen, akkor a kód így van:
live ("click", function () $ ("# stat") tablesorter (sortList: [[0,0]],
kütyü: ['zebra'],
cancelSelection: false,
widthFixed: igaz,
>);
>);
Még mindig nem működik.
Vagy szükség van-e egy élő divathoz kötni, ahol a táblázat megjelenik?
Andrew, van egy probléma, hogyan kell ezt a dinamikus táblát hozzáadni a DOM-hoz. Hogyan kell ezt csinálni az élő módszer használatával? Nem értem, hogyan különítsük el mind a küldöttséget, mind a plugint. A plug-in hívása külön-külön - érthető, de élőben, hogy mit írjon elő? Kell ide kattintani? És mire kell írnia? - Naum csak azért csatlakozik hozzá, de mint mondod, ez egy lehetőség, és valójában semmi sem működik. Már az egész agy eltört, mondja meg nekem, kérem, hogyan kell tennem?
Roman, hogy segítsen neked, legalább tudnom kell, mit akarsz csinálni és látni a kódodat. Anélkül, hogy csak általános ajánlásokat tudok adni: az élő módszernek fel kell függenie a kattintási eseményt, amely a táblázatot mutatja - ez a kód egy része. A kód másik része felhívja a plug-inet erre a táblára. Körülbelül. És ez elvileg működni fog ... bár hibákat tudok elkövetni, természetesen itt csak próbálni kell.