function Page(index, size, count) {
var len = 10,
show = len - 3;
var prev = $(
"").addClass(
"prev").html('
"#">上一页');
var next = $(
"").addClass(
"next").html('
"#">下一页');
var li;
if (index <= 0) prev.addClass(
"disabled");
if (index >= count / size || index + 1 >= count / size) next.addClass(
"disabled");
var _p = $(
".dataTables_paginate > ul");
_p.html("");
//上一页 prev.click(
function () {
if (index > 0) load(index);
});
_p.append(prev);
if (index * size >= count) {
li = $(
"").html('
"#">1').addClass(
"active");
_p.append(li);
}
var _page = (count % size) == 0 ? count / size : parseInt(count / size) + 1;
if (index * size < count) {
if (_page <= len) {
for (
var i = 1; i < _page + 1; i++) {
li = $(
"").html('
"#">' + i + '');
if (i === index + 1) li.addClass(
"active");
_p.append(li);
}
}
if (_page > len) {
if (index < show) {
for (
var i = 1; i < 9; i++) {
li = $(
"").html('
"#">' + i + '');
if (i === index + 1) li.addClass(
"active");
_p.append(li);
}
_p.append(li);
$(
"").html('
"#">...').appendTo(_p);
li = $(
"").html('
"#">' + _page + '');
_p.append(li);
}
if (index >= show && index <= _page - show) {
/* 第一页*/ li = $(
"").html('
"#">1');
_p.append(li);
$(
"").html('
"#">...').appendTo(_p);
/*中间页*/ for (
var i = index - 2; i < index + 6; i++) {
li = $(
"").html('
"#">' + i + '');
if (i === index + 1) li.addClass(
"active");
_p.append(li);
}
/* 最后页*/ $(
"").html('
"#">...').appendTo(_p);
li = $(
"").html('
"#">' + _page + '');
_p.append(li);
}
if (index > _page - show) {
/* 第一页 */ li = $(
"").html('
"#">1');
_p.append(li);
$(
"").html('
"#">...').appendTo(_p);
/* 中间页 */ for (
var i = _page - 8; i < _page + 1; i++) {
li = $(
"").html('
"#">' + i + '');
if (i === index + 1) li.addClass(
"active");
_p.append(li);
}
}
}
next.click(
function () {
if (index < _page - 1) load(index + 2);
});
_p.append(next);
$(
"li:not(:first):not(:last) a").click(
function () {
var _pa = $(
this).text();
if (_pa !=
"...") {
load(_pa);
}
});
}
}
CSS:
.pagination {
height: 36px;
margin: 18px 0;
}
.pagination ul {
display: inline-block;
*display: inline;
*zoom: 1;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagination ul > li {
display: inline;
}
.pagination ul > li > a, .pagination ul > li > span {
float: left;
padding: 0 14px;
line-height: 34px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}
.pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span {
background-color: #f5f5f5;
}
.pagination ul > .active > a, .pagination ul > .active > span {
color: #999999;
cursor: default;
}
.pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover {
color: #999999;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a, .pagination ul > li:first-child > span {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.pagination ul > li:last-child > a, .pagination ul > li:last-child > span {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
名称栏目:急急忙忙写了个JS分页。先存着了,有时候再改
网站地址:
http://cdkjz.cn/article/jidhpc.html