Le premier: il est très courant et simple d'afficher le nombre de pages.
Image de reproduction:
• C'est du code HTML, c'est très simple (il me semble que le petit aspect soit détesté)
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf -"> <script src = "js / jquery -... js"> </ script> <script src = "js / Demo.js"> </cript> <link rel = "StyleSheet" href = "js / demo.css" /> <itle> </ title> </ head> <body> <pable> <thead> <tthead> <tr> <th> name </ th> <th> sexe </th> <th> nombre </ th> <th> Âge </ th> </tr> </thead> <tbody> <tr> <td> zhang San </td> <td> mâle </td> <td> </td> <td> </tr> <tr> <td> tom </td> <td> mâle </td> <td> </td> <td> </td> </tr> <td> li Si </td> <td> mâle </td> <td> </td> <td> </td> </tr> <td> edang </td> <td> mâle </td> <td> </td> </ tr> <td> eya </td> <td> femelle </td> <td> </td> </tr> <td> </tr> </dbody> </html>
• Ce qui suit est le code JS
$ (function () {var $ table = $ ('table'); // Obtenez l'objet de table var currentPage =; // Définissez la valeur par défaut de la page actuelle sur var pagesize =; // définir le nombre de pages affiché tr '). hide (). Slice (currentPage * pagesize, (currentPage +) * pagesize) .show (); // masquer toutes les lignes du TBOD sumpages = math.ceil (sumrows / pagesize); // Obtenez le nombre total de pages var $ pager = $ ('<div> </div>'); pour (var pageIndex =; pageIndex <sumpages; pageIndex ++) {$ ('<a href = "#"> <span> '+ (pageIndex +) +' </span> </a> ') .bind ("cliquez", {"newPage": pageIndex}, fonction (événement) {CurrentPage = event.data [newpage "] affiché}). APPENDTO ($ Pager); $ pager.append ("");} $ pager.insertafter ($ table); $ table.trigger ("pagity");});Le second: implémenter la page avant et la page de retour
Image de reproduction:
• C'est tout le code, et il est toujours très simple d'utiliser JS natif (il semble avoir un amour inexplicable pour JS natif, y en a-t-il)
<! Doctype html> <html> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-" /> <tight> pagination de table </ title> </ head> <body> <style type = "text / css">. TableBox {border: solid px #dddd;}. TD {Text-Align: Center; Border: 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> <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> </ 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> <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> <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 = "Height: px; margin: px;"> <spann id = "spanFirst"> première page </span> <spann id = "spanpre"> page précédente </span> <spann id = "spannext"> page suivante </span> <spann id = "spanlast"> dernière page </span> page </ span> page <pan <pan ScrewPhy type = "text / javascript"> var thetable = document.getElementById ("Table"); var totalPage = document.getElementById ("spantotalpage"); var spagem = document.getElementyid ("spanpagenum"); SpanFirst = Document.GetElementById ("SpanFirst"); var Spanlast = Document.GetElementById ("SpanLast"); var NumberRowsIntable = TheTable.Rows.Length; NumberRowsIntable) maxRow = NumberRowsIntable; for (var i = currentrow; i <maxrow; i ++) {thetable.rows [i] .style.display = '';} page ++; if (maxrow == nombreRowsIntable) {nextText (); lastText ();} showpage (); proLinable (););); fonction pre () {Hidetable (); page -; currentRow = pageSize * page; maxRow = currentRow - pagesize; if (currentRow> NumberRowsIntable) currentRow = NumberRowsIntable; pour (var i = maxrow; i <currentrow; i ++) {thetable.rows [i] .style.display = '';} if (maxRow ==) {Pretext (); firstText ();} showpage (); NextLink (); LastLink ();} // First Page Fonction () {HideTable (); Page =; pour var i = / première page Fondé i <pagesize; i ++) {thetable.Rows [i] .style.display = '';} showPage (); Pretext (); nextLink (); LastLink ();} // Fonction de page Last () {Hidetable (); pour (PageCount (); i ++) {thetable.rows [i] .style.display = '';} showPage (); prelink (); nextText (); firstLink ();} function Hidetable () {for (var i =; i <nombreRowsIntable; i ++) {thetable.Rows [i] .Style.display = 'nul';} function showpage (). {pagenum.innerhtml = page;} // Nombre total de pages fonction pageCount () {var count =; if (numberRowsIntable% pagesize! =) count =; return parseInt (NumberRowsIntable / pageSize) + Count;} // Afficher la fonction de lien preLink () {spanpre.innerhtml = "<a href = 'javascript: pre ();'> page précédente </a>"; } fonction pretext () {spanpre.innerhtml = "page précédente"; } fonction nextLink () {spannext.innerhtml = "<a href = 'javascript: next ();'> page suivante </a>"; } fonction pretext () {spanpre.innerhtml = "<a href = 'javaScript: next ();'> page suivante </a>"; } fonction nextLink () {spannext.innerhtml = "<a href = 'javascript: next ();'> page suivante </a>"; } fonction nextText () {spannext.innerhtml = "page suivante"; } fonction firstlink () {spanfirst.innerhtml = "<a href = 'javascript: premier ();'> première page </a>"; } fonction firstText () {spanfirst.innerhtml = "première page"; } fonction lastLink () {spanlast.innerhtml = "<a href = 'javascript: last ();'> dernière page </a>"; } function lastText () {spanlast.innerhtml = "Last Page"; } // Hide Table Fonction masquée () {for (var i = pagesize; i <nombreRowsIntable; i ++) {thetable.Rows [i] .style.display = 'non';} totalPage.innerHtml = pageCount (); pagenem.innerHtml = ''; nextLink (); lastLink ();} hide (); </cript> </body> </html>Le contenu ci-dessus est le code JS introduit par l'éditeur pour réaliser l'effet de la pagination de données de table. J'espère que ce sera utile à tout le monde. Si vous avez des questions, laissez-moi un message. L'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web du réseau Wulin!