ส่วนประกอบเพจจิ้งง่าย ๆ ที่เขียนด้วยตัวเองฟังก์ชั่นหลักและการใช้งานทั้งหมดอยู่ใน JS เพิ่ม DIV เพียงเพื่อวางหน้าเพื่อสร้างเพจและให้ ID ของคอนเทนเนอร์
โครงสร้าง HTML มีดังนี้:
การคัดลอกรหัสมีดังนี้:
<ul id = "pagediv">
</ul>
class = "pagination" ให้สไตล์การแบ่งหน้า
ID = "PAGEDIV" ใช้เพื่อวางการแบ่งแยก JS ที่สร้างขึ้น
โครงสร้าง CSS มีดังนี้:
การคัดลอกรหัสมีดังนี้:
. -pagination {
ระยะขอบด้านบน: 10px;
มาร์จิ้น-ก้น: 10px;
แสดง: Inline-Block;
Padding-Left: 0;
มาร์จิ้น: 20px 0;
แนวชายแดน: 4px;
-
.pagination> li {
แสดง: อินไลน์;
-
.pagination> li: เด็กคนแรก> a {
ขอบซ้าย: 0;
ชายแดนด้านซ้าย-ซ้าย-Radius: 4px;
ชายแดนด้านล่างซ้าย-ไรเดอัส: 4px;
-
.pagination> li> a {
ตำแหน่ง: ญาติ;
ลอย: ซ้าย;
Padding: 6px 12px;
ขอบซ้าย: -1px;
ความสูงของสาย: 1.42857143;
สี: #337ab7;
การตกแต่งข้อความ: ไม่มี;
พื้นหลังสี: #FFF;
ชายแดน: 1px Solid #DDD;
เคอร์เซอร์: ตัวชี้;
-
.pagination> li> a.navcur {
ความเป็นมา: #CCCCCCCC;
สี: #ffffff;
-
ต่อไปนี้คือโครงสร้าง JS โปรดดู jQuery
การคัดลอกรหัสมีดังนี้:
-
* @pagecontentId การแสดงผลองค์ประกอบ div ของหน้า
* @curpage หน้าเริ่มต้นปัจจุบัน
* @totalcount จำนวนรวม
* @pagerows จำนวนการแสดงต่อหน้า
* @Callback ฟังก์ชันการโทรกลับที่แสดงข้อมูล
-
ฟังก์ชั่น pagelist (pageContentId, ตัวเลือก) {
this.pageContentId = document.getElementById (pageContentId);
this.curpage = ตัวเลือก. curpage;
this.totalcount = ตัวเลือก. totalcount;
this.pagerows = ตัวเลือก. pagerows;
this.callback = opption.callback;
this.pagesize = math.ceil (this.totalcount/this.pagerows);
-
pagelist.prototype = {
init: function () {
this.renderbtn ();
-
FIRSTPAGE: function () {
var _self = this;
_self._firstPage = document.createElement ("li");
_self._firstpagea = document.createElement ("A");
_self._firstpagea.innerhtml = "โฮมเพจ";
_self._firstpage.appendchild (_self._firstpagea);
this.pagecontentid.appendchild (_self._firstpage);
_self._firstpage.onclick = function () {
_self.gotopage (1);
-
-
LastPage: function () {
var _self = this;
_self._lastpage = document.createElement ("li");
_self._lastpagea = document.createElement ("A");
_self._lastpagea.innerhtml = "หน้าสุดท้าย";
_self._lastpage.appendchild (_self._lastpagea);
this.pagecontentid.appendchild (_self._lastpage);
_self._lastpage.onclick = function () {
_self.gotopage (_self.pagesize);
-
-
Putpage: function () {
var _self = this;
_self._prew = document.createelement ("li");
_self._prewa = document.createelement ("a");
_self._prewa.innerhtml = "<<";
_self._prew.appendchild (_self._prewa);
this.pagecontentid.appendchild (_self._prew);
_self._prew.onclick = function () {
if (_self.curpage> 1) {
_self.curpage--;
-
_Self.Callback.CALL (นี่, this.curpage);
_self.init ();
console.log (_self.curpage);
-
-
NextPage: function () {
var _self = this;
_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 (นี่, this.curpage);
_self.init ();
console.log (_self.curpage);
-
-
pagenum: function () {
var _self = this;
if (this.pagesize <= 10) {
สำหรับ (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);
-
-
-
อื่น{
if (_self.curpage <= 10) {
สำหรับ (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);
-
-
-
อื่นถ้า (_self.curpage> 10 && _ self.curpage <= this.pagesize) {
if (this.pagesize <math.ceil (_self.curpage/10)*10) {
สำหรับ (var i = math.floor (_self.curpage/10)*10+1; i <= this.pagesize; i ++) {
if (_self.curpage> this.pagesize)
กลับ;
_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);
-
-
}อื่น{
if (math.ceil (_self.curpage/10)*10 == _ self.curpage) {
สำหรับ (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);
-
-
}อื่น{
สำหรับ (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") แต่ละ (ฟังก์ชั่น () {
if ($ (นี่) [0] .innerText == _ self.curpage) {
$ (". pagination li"). เด็ก ๆ ("a"). RemoveClass ("navcur");
$ (นี่) ..children ("a"). addclass ("navcur");
-
-
-
getOpage: ฟังก์ชั่น (curpage) {
this.curpage = curpage;
this.callback.call (นี่, 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 = new pagelist ("pagediv", {
Curpage: 1,
TotalCount: 26,
Pagerows: 1,
การโทรกลับ: callbackfuc
-
Pager.init ();
-
ฟังก์ชั่น callbackfuc (curpage) {
-
ภาพประกอบ:
หน้านี้ขึ้นอยู่กับ 10 หน้า เมื่อต่ำกว่า 10 หน้าหน้าทั้งหมดจะปรากฏขึ้น เมื่อมากกว่า 10 หน้าหน้าจะหันไปแสดงหน้าที่เหลือ
วิธีการโทร:
การคัดลอกรหัสมีดังนี้:
$ (function () {
var pager = new pagelist ("pagediv", {
Curpage: 1,
TotalCount: 26,
Pagerows: 1,
การโทรกลับ: callbackfuc
-
Pager.init ();
-
ด้านบนเป็นรหัสหลักของส่วนประกอบเพจนี้ ฉันหวังว่าคุณจะชอบมัน