O primeiro: é muito comum e simples exibir o número de páginas.
Imagem de reprodução:
• Este é o código html, muito simples (pareço ver a pequena aparência de não gostar)
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <script src = "js/jQuery -... js"> </cript> <script src = "js/Demo.js"> </script> <link Rel = Styleshen " href = "js/Demo.css"/> <title> </title> </ad Head> <body> <table> <thead> <tthead> <tr> <th> nome </th> <th> gênero </th> <th> número </s> <the> Age </th> </than </ San </td> <td> masculino </td> <td> </td> <td> </tr> <tr> <td> Tom </td> <td> masculino </td> <td> </td> <td> </td> </td> <td> li Si </td> <td> masculino </td> <td> </td> <td> </td> </tr> <td> edang </td> <td> masculino </td> <td> </td> </tr> <td> eya </td> <td> feminino </td> <td> </td> </tr> <td> </tr> </tbody> </html>
• A seguir, o código JS
$ (function () {var $ tabela = $ ('tabela'); // Obtenha o objeto TABLE VAR CurrentPage =; // Defina o valor padrão da página atual como VAR PAGESIZE =; // Defina o número de páginas exibidas para cada página $ tabela.bind ('paging', function () {$ tabela.dind. tr '). hide (). Slice (Currentpage*PageSize, (CurrentPage+)*Pagesize) .Show (); // Ocultar todas as linhas no Tody Tody primeiro e, em seguida, exibir os dados através da fatia combinada com o número atual de páginas e o número de páginas exibidas}); Sumpages = Math.ceil (SUMROWS/PAGESSIZE); // Obtenha o número total de páginas var $ pager = $ ('<div> </div>'); para (var pageIndex =; PageIndex <Sumpages; PageIndex ++) {$ ('<A href = "#"> <pan> '+(PageIndex+)+' </span> </a> ') .bind ("clique", {"newpage": PageIndex}, function (event) {currentPage = event.data ["newPage"]; exibido}). Appendto ($ pager); $ pager.append ("");} $ pager.insertafter ($ tabela); $ tabela.trigger ("paging");});O segundo: Implementar a página avançada e a página traseira
Imagem de reprodução:
• Este é todo o código, e ainda é muito simples usar JS nativo (parece ter um amor inexplicável pelo JS nativo, existe algum)
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-"/> <title> tabela paginação </title> </ading> <body> <estilo "" text/css ">. td {text-align: centro; borda: sólido px #ddd; preenchimento: px;} </style> <div> <tabela celularpadding = "" cellpacing = ""> <tbody id = "tabela"> <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 = "altura: px; margem: px;"> <span id = "spanfirst"> primeira página </span> <span id = "spanpre"> página anterior </span> <span id = "spannExt"> próxima página </span <span od = "spanlast"> last página </span> </span/</total> <span <span = "spanTer =" spanlast "> página </span> type = "text/javascript"> var thetable = document.getElementById ("tabela"); var totalpage = document.getElementById ("spantotalpage"); var pagenum = document.getElementById ("spanpagenum"); var spanPre = document.lementById ("spanPre"; spPeRsPren; spanpagenum "); spanfirst = document.getElementById ("spanfirst"); var spanLast = document.getElementById ("spanLast"); var numberRowsintable = theTable.rows.Length; var paagesize =; pag PageSize =; // Next Page FUNÇÃO () {HIDETABLE (); currentRow = Pagesize *; NumberRowsintable) maxrow = numberRowsintable; para (var i = currentRow; i <maxrow; i ++) {thetable.rows [i] .style.display = '';} página ++; if (maxrow == numberRowsintable ) {nextText (); lastText ();} showPage (); prelink (); FirstLink ();} // Função de página anterior Pre () {hidetable (); página-; currentRow = Pagesize * Page; maxrow = currentRow-Pagesize; if (currentRow> númeroRowsinttable; para (var i = maxRow; i <currentRow; i ++) {theTable.Rows [i] .style.display = '';} if (maxrow ==) {pretext (); primeiro; fútex; i <Pagesize; i ++) {thetable.Rows [i] .style.display = '';} showPage (); prelink (); nextText (); primeirolink ();} função hidetable () {para (var i =; i <numberRowsintable; i ++) {thetable.Rows [i]. {pagenum.innerhtml = página;} // número total de páginas função pageCount () {var count =; if (numberRowsIntable%pageSize! =) count =; retornar parseint (númeroRowsIntable/pagageSize) + count;} // Mostrar função de link prelink () {spanPre.innerhtml = "<a href = 'javascript: pre ();'> página anterior </a>"; } function pretext () {spanPre.innerhtml = "página anterior"; } função nextLink () {spannext.innerhtml = "<a href = 'javascript: next ();'> próxima página </a>"; } function pretext () {spanPre.innerhtml = "<a href = 'javascript: next ();'> próxima página </a>"; } função nextLink () {spannext.innerhtml = "<a href = 'javascript: next ();'> próxima página </a>"; } função nextText () {spannext.innerhtml = "Próxima página"; } function FirstLink () {spanfirst.innerhtml = "<a href = 'javascript: primeiro ();'> primeira página </a>"; } function firstText () {spanfirst.innerhtml = "primeira página"; } função lastLink () {spanLast.innerhtml = "<a href = 'javascript: last ();'> última página </a>"; } função lastText () {spanLast.innerhtml = "última página"; } // Ocultar a função da tabela hide () {for (var i = pagageSize; i <numberRowsintable; i ++) {thetable.Rows [i] .style.display = 'None';} totalpage.innerhtml = pageCount (); pagenum.innerhtml = ''; nextLink (); lastLink ();} hide (); </sCript> </body> </html>O conteúdo acima é o código JS introduzido pelo editor para realizar o efeito da paginação de dados da tabela. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site da Wulin Network!