急急忙忙写了个JS分页。先存着了,有时候再改
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);
}
});
}
}
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://scyanting.com/article/jidhpc.html