В этой статье описывается использование инструмента Pagination JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Кодовая часть JS:
Скопируйте код следующим образом:/**
* Парень JS
*/
var page;
(function () {
var page = {версия: "1.0", автор: "liuxingmi"};
var showpage = 9;
Page.navigation = function (Divid, TotalRecord, TotalPage, CurrentPage, Func) {
var nav = '<ul class =/"pagination/" title =/"list/">'> ';
NAV += '<li> Общие записи: <i id = "totalRecord">' +totalRecord +'</i> </li>';
NAV + = '<li> Общее количество страниц: <i id = "totalPage">' + totalPage + '</i> </li>';
Nav + = '<li> Текущая страница: <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"> предыдущая страница </a> </li> ';
} еще {
Nav + = '<li> <a href = "javascript:' + func + '(1);" id = "FirstPage"> Home </a> </li> ';
Nav + = '<li> <a href = "javascript:' + func + '(' + (currentpage -1) + ');" id = "FrontPage"> предыдущая страница </a> </li> ';
}
Nav += '<li id = "num"> <ol>';
var start = currentpage - math.floor (showpage/2);
var end = currentpage + math.floor (showpage/2);
if (end> totalPage) {
Start - = (End - TotalPage);
}
if (start <= 0) {
начало = 1;
}
if (CurrentPage <ShowPage && End <ShowPage) {
end = showPage;
}
if (end> totalPage) {
end = totalPage;
}
for (var i = start; i <= end; i ++) {
if (i == currentpage) {
Nav + = '<li> <a href = "javascript:' + func + '(' + i + ');">' + i + '</a> </li>';
} еще {
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"> Последняя страница </a> </li> ';
Nav += '<li> <a href = "javascript: void (0);" id = "Последняя страница"> Последняя страница </a> </i> ';
} еще {
Nav + = '<li> <a href = "javascript:' + func + '(' + (currentpage + 1) + ');" id = "NextPage"> Последняя страница </a> </li> ';
Nav + = '<li> <a href = "javaScript:' + func + '(' + totalPage + ');" id = "Последняя страница"> Последняя страница </a> </i> ';
}
NAV += '</ul>';
$ ("#" + divid) .html (Nav);
};
this.page = page;
}) ();
CSS часть:
Скопируйте код следующим образом:/*Стиль страницы начинается*/
.pagination {
переполнение: скрыто;
Полевая: 0 0 0 25px;
Заполнение: 10px 10px 6px 150px;
Пограничная топ: 1PX SOLID #C8C8C8;
_zoom: 1;
Текст-альбом: Центр;
}
.pagination *{
дисплей: inline;
Плавание: осталось;
поля: 0;
Заполнение: 0;
размер шрифта: 12px;
}
.pagination i {
Плавание: нет;
Право накладки: 1PX;
}
.currentPage b {
Плавание: нет;
Цвет:#F00;
}
.pagination li {
Список стиля: нет;
Полевая: 0 5px;
}
.pagination li li {
позиция: относительно;
Полевая: -2px 0 0;
Семейство шрифта: ариальная, helvetica, sans-serif
}
. Firstpage a
переполнение: скрыто;
высота: 0;
Текст-интент: -9999EM;
Пограничная топ: 8px solid #fff;
Пограничный подклад: 8px solid #fff;
}
.pagination li li a {
Полевая: 0 1PX;
Заполнение: 0 4px;
Граница: 3px Double #ffff;
+пограничный цвет: #EEE;
Фон: #EEE;
Цвет:#06F;
Текстовое декорация: нет;
}
.pagination li li a: Hover {
Фон:#F60;
Пограничный цвет: #ffff;
+пограничный цвет:#F60;
Цвет: #ffff;
}
li.firstpage {
Полевая левая: 40px;
РЕШЕНЬ-ЛЕРФ: 3PX SOLID #06F;
}
. FirstPage A, .previousPage a {
граница правая: 12px solid #06f;
}
. FirstPage A: Hover, .previousPage a: Hover {
граница правый цвет: #F60;
}
.nextpage a, .lastpage a {
Слево с границы: солидный солид 12px #06f;
}
.nextpage a: Hover, .lastpage a: Hover {
Пограничный левый цвет:#F60;
}
.pagination li.lastpage {
граница правая: 3PX Solid #06F;
}
.pagination li li li.currentState a {
позиция: относительно;
Полевая: -1px 3px;
Заполнение: 1px 4px;
Граница: 3px Double #ffff;
+пограничный цвет:#F60;
Фон:#F60;
Цвет: #ffff;
}
.pagination li.currentState, .currentState a, .currentState a: Hover {
Пограничный цвет: #ffff #CCC;
Курсор: по умолчанию;
}
/*Стиль страниц заканчивается*/
Метод вызова:
Кода -код выглядит следующим образом: page.navigation ("pagenav", 100, 10, 1, "xxxlist");
<div id = "pagenav"> </div>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.