Vamos dar uma olhada nas renderizações primeiro:
Código JS simples de paginação:
1. Descrição do efeito:
plugin jQuery que pode ser exibido sem paginação
JQuery Paging Plugin - jquery.page.js é muito simples de usar e tem grande efeito
2. Método de chamada:
$ (". TCDPAGECODE"). CreatePage ({pageCount: 10, Current: 1, backfn: function (p) {// Clique no método de retorno de chamada, p é o número atual da página}}); Pagecount: Número total de páginas atuais: página atual3. Código de encapsulamento JS
// plugin de paginação/** ch **/(function ($) {var ms = {init: function (obj, args) {return (function () {ms.filhtml (obj, args); ms.bindevent (obj, args);}); obj.Empty (); && args.pageCount! = 4) {obj.append ('<a href = "javascript:; -2, end = args.current+2; 1) {if (start! = Args.current) {obj.append ('<a href = "javascript:; args.pagecount> 5) {obj.append ('<pan> ... </span>'); // Página seguinte se (args.current <args.pageCount) {obj.append ('<a href = "javascript :;"> próximo página </a>'); }, // Evento de ligação BindEvent: function (obj, args) {return (function () {obj.on ("clique", "a.tcdnumber", function () {var fren = parseInt ($ (this) .text ()); ms.filhtm (obj, {"atual": "Page". if (typeof (args.backfn) == "function") {args.backfn (atual); ms.filhtml (obj, {"atual": atualização-1, "pageCount": args.pageCount}); parsent (obj.children ("span.current"). text ()); }}}); }}} $ .fn.createPage = function (options) {var args = $ .extend ({pageCount: 10, atual: 1, backfn: function () {}}, opções); srs.init (isto, args); }}) (jQuery);4. Use a demonstração:
<! Doctype html> <html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta charset = "utf-8"/> <title> um plugin de paginação muito simples </title> </title *; preenchimento: 0; estilo de lista: nenhum;} a {decoração de texto: nenhum;} a: pairar {decoração de texto: nenhum;} .tcdpageCode {preenchimento: 15px 20px; text-align: linefl; cor: #cc;} .tcdpagecode a {display: inlineblock; cor: #cc;} .tcdpagecode a {display: inline-block; altura de linha: 25px; preenchimento: 0 10px; borda: 1px sólido #ddd; margem: 0 2px; radio de borda: 4px; alinhamento vertical: médio;} .tcdPagecode a: pairar {decoração de texto: nenhum; borda: 1px Solid #428bca;}. #FFF; Background-Color: #428BCA; borda de 1px sólido #428bca; radio de borda: 4px; alinhamento vertical: médio;} .tcdpagecode span.disabled {display: block inline; altura: 25px; line-hight: 25px; padding: 0 10px; margin: 0 2px; colorf2; #bfbf; Radio de fronteira: 4px; vertical-align: Middle;} </style> </head> <body> <style> .baidu_ads {width: 960px; Altura: 90px; Posição: Absoluto; Esquerda: 50%; Inferior: 0; margem-esquerda: -480px; Overflow: Hidden;} </style> <div> </div> <span style = "display: none;"> </span> <!-Parte do código começo-> <div> </div> <pre> Chamada Método: $ (". Tcdpagecode"). PagEcount: Número total de páginas: página atual </pre> </body> <script src = "// www.vevb.com/ajaxjs/jquery.min.js"> </script> <script src = "// www.vevb.com/ajaxjs/jquery.jsgy.js"> $ (". tcdpageCode"). CreatePage ({pageCount: 6, atual: 1, backfn: function (p) {console.log (p);}}); </script> <!-Código End-> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem JavaScript.