Mari kita lihat rendering terlebih dahulu:
Kode JS Paging Sederhana:
1. Efek Deskripsi:
plugin jQuery yang dapat ditampilkan tanpa pagination
Plugin JQuery Paging - jQuery.page.js sangat mudah digunakan dan memiliki efek yang luar biasa
2. Metode Panggilan:
$ (". TCDPAGECODE"). CreatePage ({pagecount: 10, saat ini: 1, backfn: function (p) {// klik metode callback, p adalah nomor halaman saat ini}}); PageCount: Total Jumlah Halaman Saat Ini: Halaman Saat Ini3. Kode enkapsulasi JS
// plugin pagination/** ch **/(function ($) {var ms = {init: function (obj, args) {return (function () {ms.fillHtml (obj, args); ms.bindevent (obj, args);}) ();}, // mengisi html {function) (function) () ();}, // isi html {function) {function) () (); obj.empty (); && args.pagecount! = 4) {obj.append ('<a href = "javaScript:;">'+1+ '</a>')} if (args.current-2> 2 && args.current <= args.pagecount & ARGS.PAGECOUNT> 5) {OBJ.CURRENT (ARGS.PAGECOUNT & ARGS. -2, args.current+2; 1) {if (start! = Args.current) {obj.append ('<a href = "javascript:;">' + start + '</a>'); args.pagecount> 5) {obj.append ('<span> ... </span>'); // halaman berikutnya (args.current <args.pagecount) {obj.append ('<a href = "javascript:;"> halaman berikutnya </a>'); }, // Binding event bindevent: function (obj, args) {return (function () {obj.on ("klik", "a.tcdnumber", function () {var current = parseInt ($ (this) .text ()); ms.fillhtml (obj, {"saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini:" saat ini, "saat ini:" saat ini, "saat ini:" saat ini: "saat ini:" saat ini: "saat ini:" saat ini: "saat ini:" saat ini: "saat ini," saat ini, "saat ini," saat ini: "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini," saat ini, "saat ini": " if (typeof (args.backfn) == "function") {args.backfn (saat ini); ms.fillhtml (obj, {"saat ini": current-1, "pagecount": args.pagecount}); ParseInt (Obj.Children ("Span.Current"). Teks ()); }}}); }}} $ .fn.createPage = function (options) {var args = $ .extend ({pagecount: 10, saat ini: 1, backfn: function () {}}, opsi); ms.init (ini, args); }}) (jQuery);4. Gunakan demo:
<! Doctype html> <html lang = "zh-cn" xmlns = "http://www.w3.org/1999/xhtml"> <adap head> <meta charset = "utf-8"/<title> mutan yang sangat sederhana plugin pagin </title> </gerdae> {title> 0; Padding: 0; List-style: none;} a {text-decoration: none;} a: hover {text-decoration: none;} .tcdpageCode {padding: 15px 20px; text-align: left; color: #ccc;} .tcdpageCode A {display: inline-block; color: #42 Line-Height: 25px; padding: 0 10px; Border: 1px solid #ddd; Margin: 0 2px; Border-Radius: 4px; Vertical-Align: Middle;} .tcdpageCode A: Hover {Text-Decoration: None; Border: 1PX Solid #428BCA;} .TCDPAGECODE SPAN. #fff; latar belakang-warna: #428bca; Border: 1px Solid #428BCA; Border-Radius: 4px; Vertical-Align: Middle;} .tcdpageCode span.disabled {display: inline-block; tinggi: 25px; line-height: 25px; padding: 0 10px; margin: 0 2px; color: #bfb; #bfbf; border-radius: 4px; vertikal-align: tengah;} </style> </head> <body> <tyle> .baidu_ads {lebar: 960px; Tinggi: 90px; Posisi: Absolute; Kiri: 50%; Bawah: 0; margin-kiri: -480px; overflow:hidden;} </style> <div> </div> <span style="display:none;"> </span><!-- Code part begin --> <div> </div> <pre> Call method: $(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //Click the callback method, p is the current page number} }); pageCount: Total number of pages: current page</pre> </body> <script src="//www.VeVB.COM/ajaxjs/jquery.min.js"></script> <script src="//www.VeVB.COM/ajaxjs/jquery.page.js"></script> <script> $ (". TCDPAGECODE"). CreatePage ({pagecount: 6, saat ini: 1, backfn: function (p) {console.log (p);}}); </script> <!-Kode bagian akhir-> </html>Di atas adalah semua tentang artikel ini, saya harap ini akan membantu semua orang untuk belajar JavaScript.