Komponen paging sederhana yang ditulis oleh saya sendiri, fungsi dan implementasi utama semuanya ada di JS. Hanya tambahkan div untuk menempatkan halaman untuk menghasilkan paging dan berikan ID wadah.
Struktur HTML adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<ul id = "pagediv">
</ul>
class = "pagination" memberikan gaya pagination,
id = "pagediv" digunakan untuk menempatkan pagination yang dihasilkan JS
Struktur CSS adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
.pagination {
margin-top: 10px;
margin-bottom: 10px;
Tampilan: blok inline;
Padding-left: 0;
Margin: 20px 0;
Border-Radius: 4px;
}
.pagination> li {
Tampilan: inline;
}
.pagination> li: anak pertama> {
margin-kiri: 0;
Border-top-left-radius: 4px;
Border-bottom-left-Radius: 4px;
}
.pagination> li> a {
Posisi: kerabat;
float: kiri;
padding: 6px 12px;
margin -kiri: -1px;
Line-Height: 1.42857143;
Warna: #337AB7;
Dekorasi Teks: Tidak Ada;
Latar Belakang-Color: #FFF;
Perbatasan: 1px solid #ddd;
kursor: pointer;
}
.pagination> li> a.navcur {
Latar Belakang: #CCCCCCCC;
Warna: #FFFFFF;
}
Berikut ini adalah struktur JS, silakan merujuk ke jQuery
Salinan kode adalah sebagai berikut:
/**
* @pagecontentid rendering elemen div dari halaman
* @Curpage halaman mulai saat ini
* @totalcount jumlah total
* @Pagerows Jumlah tampilan per halaman
* @callback fungsi panggilan balik yang menampilkan data
*/
function pagelist (pageContentId, opsi) {
this.pagecontentId = document.getElementById (pageContentId);
this.curpage = option.curpage;
this.totalCount = option.totalCount;
this.pagerows = option.pagerows;
this.callback = option.callback;
this.pagesize = math.ceil (this.totalcount/this.pagerows);
}
Pagelist.prototype = {
init: function () {
this.renderbtn ();
},
FirstPage: function () {
var _self = ini;
_Self._firstpage = document.createElement ("li");
_Self._firstpageA = document.createElement ("a");
_Self._firstpageA.innerHtml = "HomePage";
_Self._firstpage.AppendChild (_Self._firstpageA);
this.pagecontentId.appendChild (_self._firstpage);
_self._firstpage.onClick = function () {
_Self.gotopage (1);
}
},
LastPage: function () {
var _self = ini;
_self._lastpage = document.createElement ("li");
_self._lastpageA = document.createElement ("a");
_Self._lastpageA.innerHtml = "halaman terakhir";
_self._lastpage.AppendChild (_Self._LastPageA);
this.pagecontentId.appendChild (_self._lastpage);
_self._lastpage.onClick = function () {
_Self.gotopage (_self.pagesize);
}
},
putpage: function () {
var _self = ini;
_self._prew = document.createElement ("li");
_self._prewa = document.createElement ("a");
_Self._prewa.innerHtml = "<<";
_self._prew.applchild (_self._prewa);
this.pagecontentId.appendChild (_self._prew);
_self._prew.onClick = function () {
if (_self.curpage> 1) {
_Self.Curpage--;
}
_self.callback.call (ini, this.curpage);
_self.init ();
console.log (_self.curpage);
}
},
nextPage: function () {
var _self = ini;
_Self._next = document.createElement ("li");
_Self._nexta = document.createElement ("a");
_Self._nexta.innerHtml = ">>";
_Self._next.AppendChild (_Self._nexta);
this.pagecontentId.appendChild (_self._next);
_Self._next.onClick = function () {
if (_self.curpage <_self.pagesize) {
_Self.Curpage ++;
}
_self.callback.call (ini, this.curpage);
_self.init ();
console.log (_self.curpage);
}
},
pagenum: function () {
var _self = ini;
if (this.pagesize <= 10) {
untuk (var i = 1, len = this.pagesize; i <= len; i ++) {
_Self._num = document.createElement ("li");
_Self._numa = document.createElement ("a");
_Self._numa.innerHtml = i;
_Self._num.AppendChild (_Self._numa);
this.pagecontentId.appendChild (_self._num);
_Self._num.onClick = function () {
var curpage = $ (this) .text ();
_Self.gotopage (Curpage);
}
}
}
kalau tidak{
if (_self.curpage <= 10) {
untuk (var i = 1; i <= 10; i ++) {
_Self._num = document.createElement ("li");
_Self._numa = document.createElement ("a");
_Self._numa.innerHtml = i;
_Self._num.AppendChild (_Self._numa);
this.pagecontentId.appendChild (_self._num);
_Self._num.onClick = function () {
var curpage = $ (this) .text ();
_Self.gotopage (Curpage);
}
}
}
lain if (_self.curpage> 10 && _ self.curpage <= this.pagesize) {
if (this.pagesize <math.ceil (_self.curpage/10)*10) {
untuk (var i = math.floor (_self.curpage/10)*10+1; i <= this.pagesize; i ++) {
if (_self.curpage> this.pagesize)
kembali;
_Self._num = document.createElement ("li");
_Self._numa = document.createElement ("a");
_Self._numa.innerHtml = i;
_Self._num.AppendChild (_Self._numa);
this.pagecontentId.appendChild (_self._num);
_Self._num.onClick = function () {
var curpage = $ (this) .text ();
_Self.gotopage (Curpage);
}
}
}kalau tidak{
if (math.ceil (_self.curpage/10)*10 == _ self.curpage) {
untuk (var i = _self.curpage-9; i <= _ self.curpage; i ++) {
_Self._num = document.createElement ("li");
_Self._numa = document.createElement ("a");
_Self._numa.innerHtml = i;
_Self._num.AppendChild (_Self._numa);
this.pagecontentId.appendChild (_self._num);
_Self._num.onClick = function () {
var curpage = $ (this) .text ();
_Self.gotopage (Curpage);
}
}
}kalau tidak{
untuk (var i = math.floor (_self.curpage/10)*10+1; i <= math.ceil (_self.curpage/10)*10; i ++) {
_Self._num = document.createElement ("li");
_Self._numa = document.createElement ("a");
_Self._numa.innerHtml = i;
_Self._num.AppendChild (_Self._numa);
this.pagecontentId.appendChild (_self._num);
_Self._num.onClick = function () {
var curpage = $ (this) .text ();
_Self.gotopage (Curpage);
}
}
}
}
}
}
$ (". Pagination li"). masing -masing (fungsi () {
if ($ (this) [0] .innertext == _ self.curpage) {
$ (". Pagination li"). Anak -anak ("A"). Removeclass ("Navcur");
$ (ini) .Children ("A"). AddClass ("NavCur");
}
});
},
getopage: function (curpage) {
this.curpage = Curpage;
this.callback.call (this, this.curpage);
this.init ();
console.log (this.curpage);
},
renderbtn: function () {
$ (". Pagination"). html ("");
this.firstpage ();
this.prewpage ();
this.pagenum ();
this.nextpage ();
this.lastpage ();
}
};
$ (function () {
var pager = pagelist baru ("pagediv", {
Curpage: 1,
TotalCount: 26,
Pagerows: 1,
Callback: CallbackFuc
});
pager.init ();
});
fungsi callbackFuc (curpage) {
}
menjelaskan:
Halaman ini didasarkan pada 10 halaman. Ketika lebih rendah dari 10 halaman, semua halaman ditampilkan. Ketika lebih besar dari 10 halaman, halaman diputar untuk menampilkan halaman yang tersisa.
Metode Panggilan:
Salinan kode adalah sebagai berikut:
$ (function () {
var pager = pagelist baru ("pagediv", {
Curpage: 1,
TotalCount: 26,
Pagerows: 1,
Callback: CallbackFuc
});
pager.init ();
});
Di atas adalah kode inti dari komponen paging ini. Saya harap Anda bisa menyukainya.