Простой компонент пейджинга, написанный мной, основные функции и реализации - все в JS. Только добавьте Div, чтобы разместить страницу, чтобы сгенерировать пейджинг и дать идентификатор контейнера.
Структура HTML выглядит следующим образом:
Кода -копия выглядит следующим образом:
<ul id = "pagegiv">
</ul>
class = "pagination" дает стиль страниц,
id = "Paggediv" используется для размещения JS-сгенерированной страниц
Структура CSS выглядит следующим образом:
Кода -копия выглядит следующим образом:
.pagination {
маржинальная версия: 10px;
маржинальный бат: 10px;
дисплей: встроенный блок;
Лебь набивки: 0;
Маржа: 20px 0;
граница-радий: 4px;
}
.pagination> li {
дисплей: inline;
}
.pagination> li: First-Child> a {
Полевая левая: 0;
пограничная топ-левая радиус: 4px;
пограничный левый радис: 4px;
}
.pagination> li> a {
позиция: относительно;
Плавание: осталось;
Заполнение: 6px 12px;
Мяглевая маржа: -1PX;
Линия-высота: 1.42857143;
Цвет: #337AB7;
Текстовое декорация: нет;
фоновый цвет: #fff;
Граница: 1PX SOLID #DDD;
курсор: указатель;
}
.pagination> li> A.Navcur {
Фон: #CCCCCCC;
Цвет: #ffffff;
}
Ниже приводится структура JS, пожалуйста, обратитесь к jQuery
Кода -копия выглядит следующим образом:
/**
* @pageContentId рендеринг элемента Div страницы
* @curpage текущая страница старта
* @TotalCount Общее число
* @pagerows Количество дисплеев на страницу
* @callback функция обратного вызова, которая отображает данные
*/
Функция Pagelist (PageContentId, Option) {
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 ();
},
первая страница: 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);
}
},
Последняя страница: 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, 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, this.curpage);
_self.init ();
console.log (_self.curpage);
}
},
pagenum: function () {
var _self = это;
if (this.pageize <= 10) {
for (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);
}
}
}
else if (_self.curpage> 10 && _ self.curpage <= this.pagesize) {
if (this.pagesize <math.ceil (_self.curpage/10)*10) {
for (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) {
for (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);
}
}
}еще{
for (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"). Каждый (function () {
if ($ (this) [0] .innertext == _ self.curpage) {
$ (". Pagination li"). Дети ("a"). RemoveClass ("Navcur");
$ (this). Children ("a"). addclass ("Navcur");
}
});
},
getOpage: function (curpage) {
this.curpage = curpage;
this.callback.call (this, 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 ("Paggediv", {
ПРЕДУПРЕЖДЕНИЕ: 1,
TotalCount: 26,
Pagerows: 1,
обратный вызов: Callbackfuc
});
pager.init ();
});
функция Callbackfuc (curpage) {
}
иллюстрировать:
Эта страница основана на 10 страницах. Когда он ниже 10 страниц, отображаются все страницы. Когда он превышает 10 страниц, страницы поворачиваются, чтобы отобразить оставшиеся страницы.
Метод вызова:
Кода -копия выглядит следующим образом:
$ (function () {
var pager = new Pagelist ("Paggediv", {
ПРЕДУПРЕЖДЕНИЕ: 1,
TotalCount: 26,
Pagerows: 1,
обратный вызов: Callbackfuc
});
pager.init ();
});
Приведенное выше является основным кодом этого компонента подкидки. Надеюсь, вам это понравится.