Echemos un vistazo a las representaciones primero:
Código JS simple de Paging:
1. Descripción del efecto:
JQuery Plugin que se puede mostrar sin paginación
JQuery Paging Plugin - jQuery.page.js es muy simple de usar y tiene un gran efecto
2. Método de llamada:
$ (". TCDPageCode"). CreatePage ({PageCount: 10, actual: 1, backfn: function (p) {// Haga clic en el método de devolución de llamada, p es el número de página actual}}); pageCount: número total de páginas actuales: página actual3. Código de encapsulación JS
// complemento de paginación/** ch **/(function ($) {var ms = {init: function (obj, args) {return (function () {ms.fillhtml (obj, args); ms.bindevent (obj, args);}) ();}, // relleno html llena: function (obj, args) obj.empty (); && args.pageCount! = 4) {obj.append ('<a href = "javascript:;">'+1+ '</a>'); -2, end = args.Current+2; 1) {if (start! = Args.current) {obj.append ('<a href = "javascript:;">' + start + '<a>'); args.pageCount> 5) {obj.append ('<span> ... </span>'); // Página siguiente if (args.current <args.pageCount) {obj.append ('<a href = "javascript :;"> Página siguiente </a>') }, // Evento vinculante bindEvent: function (obj, args) {return (function () {obj.on ("click", "a.tcdnumber", function () {var current = parseInt ($ (this) .text ()); ms.fillhtml (obj, {"corriente": current, "PageCount: args.pageunt}); if (typeof (args.backfn) == "función") {args.backfn (actual); ms.fillhtml (obj, {"actual": actual-1, "pageCount": args.pageCount}); parseint (obj.children ("span.current"). text ()); }}}); }}} $ .fn.createPage = function (options) {var args = $ .extend ({PageCount: 10, actual: 1, backfn: function () {}}, opciones); Ms.init (esto, args); }}) (jQuery);4. Use la demostración:
; relleno: 0; list-style: none;} a {Text-Decoration: None;} a: Hover {Text-Decoration: None;} .tcdpageCode {Padding: 15px 20px; text-align: izquierda; color: #ccc;} .tcdpageCode a {display: inline-block; color: #428bca; display: inline-bloock; Línea de altura: 25px; relleno: 0 10px; borde: 1px sólido #ddd; margen: 0 2px; border-radio: 4px; vertical-align: middle;} .tcdpageCode a: hover {text-decoration: none; border: 1px sólido #428bca;} .tcdpageCode span.current {visual 2px; color: #fff; Color de fondo: #428BCA; borde: 1px Solid #428BCA; Border-radio: 4px; vertical-align: Middle;} .tcdpageCode span.disapabled {Display: Inline-Block; Height: 25px; Line-Height: 25px; Padding: 0 10px; Margen: 0 2px; color: #bfbfbfbf; de fondo: #F2f2f2f2; almohd #bfbf; border-radio: 4px; vertical-align: middle;} </style> </head> <body> <style> .baidu_ads {ancho: 960px; Altura: 90px; Posición: Absoluto; Izquierda: 50%; Abajo: 0; margen-izquierda: -480px; Overflow: Hidden;} </style> <div> </div> <span style = "display: none;"> </span> <!-código de código comienzo-> <div> </div> <pre> método de llamada: $ (". tcdpageCode"). CreatePage ({PageCount: 10, actual: 1, Backfn: function (P) {// Haga clic en el método de devolución de llamada, P de la vecina, p. PageCount: Número total de páginas: página actual </pre> </body> <script src = "// www.vevb.com/ajaxjs/jquery.min.js"> </script> <script src = "// www.vevb.com/aJaxjs/jquery.page.js"> </script> <scrito> $ (". tcdpageCode"). CreatePage ({PageCount: 6, actual: 1, backfn: function (p) {console.log (p);}}); </script> <!-End de parte de código de código-> </html>Lo anterior se trata de este artículo, espero que sea útil para todos aprender JavaScript.