مكون الترحيل البسيط الذي كتبه بنفسي ، والوظائف والتطبيقات الرئيسية كلها في JS. أضف Div فقط لوضع الصفحة لإنشاء الترحيل وإعطاء معرف الحاوية.
هيكل HTML كما يلي:
نسخة الكود كما يلي:
<ul id = "pagediv">
</ul>
class = "ترقيم الصفحات" يعطي أسلوب ترقيم الصفحات ،
يتم استخدام ID = "Pagediv" لوضع ترقيم ترقيم JS
هيكل CSS كما يلي:
نسخة الكود كما يلي:
.pagination {
الهامش: 10 بكسل ؛
هامش القاع: 10 بكسل ؛
العرض: كتلة مضمنة.
حشو اليسار: 0 ؛
الهامش: 20px 0 ؛
الحدود الحدودية: 4px ؛
}
.pagination> li {
العرض: مضمّن ؛
}
.pagination> li: أولا child> a {
الهامش اليساري: 0 ؛
الحدود إلى اليسار اليساري: 4 بكسل ؛
حدود القاع اليسار راديوس: 4 بكسل ؛
}
.pagination> li> a {
الموقف: قريب
تعويم: اليسار.
الحشو: 6px 12px ؛
الهامش اليساري: -1px ؛
Line-Height: 1.42857143 ؛
اللون: #337ab7 ؛
تدمير النص: لا شيء ؛
خلفية اللون: #fff ؛
الحدود: 1 بكسل 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 = 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 () ؛
} ،
First Page: Function () {
var _self = هذا ؛
_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 = هذا ؛
_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 = هذا ؛
_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 = هذا ؛
_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 = هذا ؛
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 ++) {
إذا (_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) ؛
}
}
}
}
}
}
$ (". ترقيم الصفحات"). كل (وظيفة () {
if ($ (this) [0] .innertext == _ self.curpage) {
$ (". ترقيم الصفحات"). الأطفال ("A"). removeclass (
$ (هذا).
}
}) ؛
} ،
getOpage: وظيفة (curpage) {
this.curpage = curpage ؛
this.callback.call (هذا ، this.curpage) ؛
this.init () ؛
console.log (this.curpage) ؛
} ،
RenderBtn: function () {
$ (". ترقيم"). 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 () ؛
}) ؛
ما سبق هو الكود الأساسي لهذا المكون الترحيل. أتمنى أن يعجبك.