Artikel ini menjelaskan penggunaan alat pagination JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Bagian Kode JS:
Salin kode sebagai berikut:/**
* Pagination JS
*/
halaman var;
(fungsi(){
var page = {versi: "1.0", penulis: "liuxingmi"};
var showpage = 9;
Page.navigation = function (Divid, TotalRecord, TotalPage, SurrentPage, Func) {
var nav = '<ul class =/"pagination/" title =/"pagination list/">';
nav += '<li> Catatan Total: <i id = "TotalRecord">' +TotalRecord +'</i> </li>';
nav + = '<li> Hitung Total: <i id = "TotalPage">' + TotalPage + '</i> </li>';
nav + = '<li> Halaman saat ini: <b id = "pagenum">' + currentpage + '</b> </li>';
if (currentPage == 1) {
nav += '<li> <a href = "javascript: void (0);" id = "FirstPage"> Home </a> </li> ';
nav += '<li> <a href = "javascript: void (0);" id = "frontpage"> halaman sebelumnya </a> </li> ';
} kalau tidak {
nav + = '<li> <a href = "javascript:' + func + '(1);" id = "FirstPage"> Home </a> </li> ';
nav + = '<li> <a href = "javascript:' + func + '(' + (currentpage -1) + ');" id = "frontpage"> halaman sebelumnya </a> </li> ';
}
nav += '<li id = "num"> <l>';
var start = currentpage - math.floor (showpage/2);
var end = currentpage + math.floor (showpage/2);
if (end> totalpage) {
mulai - = (end - totalpage);
}
if (mulai <= 0) {
mulai = 1;
}
if (currentpage <showpage && end <showpage) {
end = showpage;
}
if (end> totalpage) {
akhir = totalpage;
}
untuk (var i = start; i <= end; i ++) {
if (i == currentpage) {
nav + = '<li> <a href = "javascript:' + func + '(' + i + ');">' + i + '</a> </li>';
} kalau tidak {
nav + = '<li> <a href = "javascript:' + func + '(' + i + ');">' + i + '</a> </li>';
}
}
nav += '</ol> </li>';
if (currentPage == totalpage) {
nav += '<li> <a href = "javascript: void (0);" id = "nextpage"> halaman terakhir </a> </li> ';
nav += '<li> <a href = "javascript: void (0);" id = "lastpage"> halaman terakhir </a> </i> ';
} kalau tidak {
nav + = '<li> <a href = "javascript:' + func + '(' + (currentPage + 1) + ');" id = "nextpage"> halaman terakhir </a> </li> ';
nav + = '<li> <a href = "javascript:' + func + '(' + totalPage + ');" id = "lastpage"> halaman terakhir </a> </i> ';
}
nav += '</ul>';
$ ("#" + divid) .html (nav);
};
this.page = halaman;
}) ();
Bagian CSS:
Salin kode sebagai berikut:/*Gaya halaman dimulai*/
.pagination {
meluap: tersembunyi;
Margin: 0 0 0 25px;
padding: 10px 10px 6px 150px;
Border-top: 1px solid #c8c8c8;
_zoom: 1;
Teks-Align: tengah;
}
.pagination *{
Tampilan: inline;
float: kiri;
Margin: 0;
Padding: 0;
font-size: 12px;
}
.pagination i {
float: tidak ada;
Padding-Right: 1px;
}
.currentpage b {
float: tidak ada;
Warna:#F00;
}
.pagination li {
List-style: tidak ada;
margin: 0 5px;
}
.pagination li li {
Posisi: kerabat;
Margin: -2px 0 0;
Font-Family: Arial, Helvetica, Sans-Serif
}
.firstpage a, .previouspage a, .nextpage a, .lastpage a {
meluap: tersembunyi;
Tinggi: 0;
Text-Indent: -9999em;
Border-top: 8px solid #FFF;
Border-Bottom: 8px solid #FFF;
}
.pagination li li a {
margin: 0 1px;
padding: 0 4px;
Perbatasan: 3px ganda #FFFF;
+Border-color: #EEE;
Latar Belakang: #EEE;
Warna:#06f;
Dekorasi Teks: Tidak Ada;
}
.pagination li li a: hover {
Latar Belakang:#F60;
Color perbatasan: #FFFF;
+Color Border:#F60;
Warna: #FFFF;
}
li.firstpage {
margin-kiri: 40px;
Border-left: 3px solid #06f;
}
.firstpage a, .previouspage a {
Border-Right: 12px solid #06f;
}
.firstpage a: hover, .previouspage a: hover {
Border-Right-Color: #F60;
}
.nextpage a, .lastpage a {
Border-left: 12px solid #06f;
}
.nextpage a: hover, .lastpage a: hover {
Border-Left-Color:#F60;
}
.pagination li.lastpage {
Border-Right: 3px Solid #06F;
}
.pagination li li li.currentstate a {
Posisi: kerabat;
margin: -1px 3px;
padding: 1px 4px;
Perbatasan: 3px ganda #FFFF;
+Color Border:#F60;
Latar Belakang:#F60;
Warna: #FFFF;
}
.pagination li.currentstate, .currentState a, .currentState a: hover {
Border-color: #FFFFF #CCC;
kursor: default;
}
/*Gaya pagination berakhir*/
Metode Panggilan:
Salinan kode adalah sebagai berikut: page.navigation ("pagenav", 100, 10, 1, "xxxlist");
<Div id = "pagenav"> </div>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.