Der erste: Es ist sehr häufig und einfach, die Anzahl der Seiten anzuzeigen.
Reproduktionsbild:
• Dies ist HTML -Code, er ist sehr einfach (ich scheine den kleinen Blick zu sehen, nicht gemocht zu werden)
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-"> <script src = "js/jQuery -... js"> </script> <script src = "js/deMo.js"> </script> </script rel = "stylesheet" href = "js/Demo.css"/> <title> </title> </head> <body> <table> <thead> <thead> <tr> <TH> NAME </TH> <TH> Gender </th> <Tbods <TBody <TBody <TDBOGE <TDDOGN </TH> </tr> </thead> <Tbody> <TDD> <Td> <Td> </thang SAN </td> <td> männlich </td> <td> </td> <td> </tr> <tr> <td> Tom </td> <td> männlich </td> <td> </td> <td> </td> </tr> <td> li Si </td> <td> männlich </td> <td> </td> <td> </td> </tr> <td> edang </td> <td> männlich </td> <td> </td> </tr> <td> eya </td> <td> weiblich </td> <td> </td> </tr> <td> </tr> </tbody> </html>
• Das Folgende ist der JS -Code
$ (function () {var $ table = $ ('table'); // Erhalten Sie das Tabellenobjekt var curmoRalPage =; // Setzen Sie den Standardwert der aktuellen Seite auf var pageSize = // Setzen Sie die Anzahl der angezeigten Seiten für jede Seite $ table.bind ('Paging', Funktion () {$ table.find ('tbody). Tr '). Hide (). Slice (CurrentPage*PageSize, (CurrentPage+)*PageSize) .show (); // Alle Zeilen im TBODY zuerst verstecken und dann die Daten durch Slice in Kombination mit der aktuellen Anzahl der Seiten und der Anzahl der angezeigten Seiten anzeigen}); var sumrows = $ tabl. Sumpages = Math.ceil (Sumrows/PageSize); // Erhalten Sie die Gesamtzahl der Seiten var $ pager = $ ('<div> </div>'); für (var pageIndex =; pageIndex <Sumpages; PageIndex ++) {$ ('<a href = "#"> <span> '+(pageIndex+)+' </span> </a> ') .bind ("click", {"NewPage": PageIndex}, Funktion (Ereignis) {currentPage = event.data ["NewPage"]; angezeigt}). appendTo ($ pager); $ pager.Append ("");} $ pager.insertafter ($ table); $ table.trigger ("paging");});Die zweite: Vorwärts- und Rückseite implementieren
Reproduktionsbild:
• Dies ist der gesamte Code, und es ist immer noch sehr einfach, einheimische JS zu verwenden (es scheint eine unerklärliche Liebe zu einheimischen JS zu haben, gibt es eine).
<! DocType html> <html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-"/> <title> table pagination </title> </head> <body> <style type = "text/cs TD {Text-Align: Mitte; Rand: Solid PX #ddd; Padding: PX;} </style> <div> <table cellpadding = "cellpacing =" "> <tbody id = "table"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </t d> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </td> < td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> <td> <td> </td> </td> <td> > </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> td> <td> </td> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> < /td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> < /td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </t d> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </td > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </td> < td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <t d> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> > </td> <td> </td> <td> </td> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tbody> </table> <div style = "Höhe: px; Margin: px;"> <span id = "spanfirst"> Erste Seite </span> <span id = "spanpre"> vorherige Seite </span> <span id = "spannext"> nächste Seite </span> <spanlast id = "spanlast"> letztes Seite </span> page </span> total </div id = "spanlast" type = "text/javaScript"> var thetable = document.getElementById ("Tabelle"); var totalPage = document.getElementById ("spantotalpage"); var pagenum = document.getElementById ("spanpagenum"); var spanpre = document.getElementByid ("spanpext"); var spannexd.); spanfirst = document.getElementById ("spanfirst"); var spanlast = document.getElementById ("spanlast"); var numnrowStable = thetable.rows.Length; var pageSize =; var page =; // nächste Seitenfunktion Next () {hidetable (); currentSize = currentSize numberRowStable) maxrow = numberRowStable; für (var i = currentRow; i <maxrow; i ++) {thetable.rows [i] .Style.display = '';} Seite ++; if (maxrow == numberStable ) {nextText (); lastText ();} showPage (); prelink (); firstlink ();} // vorherige Seite Funktion PRE () {hidetable (); Seite-; currentRow = pageSize * page; maxrow = currentRow-pagessize; if (currentRow> number> numbers-number) currentRow = nummer für (var i = maxrow; i <currentrow; i ++) {thetable.rows [i] .style.display = '';} if (maxrow ==) {pretext (); FirstText ();} Showpage (); NextLink (); i <pageSize; i ++) {thetable.rows [i] .Style.display = '';} showPage (); prelink (); nextText (); firstlink ();} function hidetable () {für (var i =; i <nummerRowStable; i ++) {{thetable.rows [i]. {pagenum.innerhtml = Seite;} // Gesamtzahl der Seiten Funktion pageCount () {var count =; if (numnrowStable%PageSize! =) count =; return parseInt (numberRowStable/pageSize) + count;} // Link -Funktion Prelink () {spanpre.innnerhtml = "<a href = 'javaScript: pre ();'> vorherige Seite </a>"; } function pretext () {spanpre.innnerhtml = "vorherige Seite"; } function NextLink () {spannext.innerhtml = "<a href = 'javaScript: next ();'> nächste Seite </a>"; } function pretext () {spanpre.innnerhtml = "<a href = 'javaScript: next ();'> nächste Seite </a>"; } function NextLink () {spannext.innerhtml = "<a href = 'javaScript: next ();'> nächste Seite </a>"; } function NextText () {spannext.innerhtml = "nächste Seite"; } function firstlink () {spanfirst.innnerhtml = "<a href = 'javaScript: first ();'> erste Seite </a>"; } function firstText () {spanfirst.innerhtml = "erste Seite"; } function lastLink () {spanlast.innerhtml = "<a href = 'javaScript: last ();'> Letzte Seite </a>"; } function lastText () {spanlast.innerhtml = "letzte Seite"; } // Tabellenfunktion hide () {for (var i = pageSize; i <numberRowStable; i ++) {thetable.rows [i] .Style.display = 'none';} TotalPage.innerHtml = pageCount (); pagenum.innerhtml = ''; nextLink (); lastLink ();} hide (); </script> </body> </html>Der obige Inhalt ist der vom Editor eingeführte JS -Code, um den Effekt von Tabellendatenpaging zu realisieren. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird alle rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin Network -Website!