function Page(index, size, count) {
var len = 10,
show = len - 3;
var prev = $("<li />").addClass("prev").html('<a href="#">上一页</a>');
var next = $("<li />").addClass("next").html('<a href="#">下一页</a>');
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 = $("<li />").html('<a href="#">1</a>').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 = $("<li />").html('<a href="#">' + i + '</a>');
if (i === index + 1) li.addClass("active");
_p.append(li);
}
}
if (_page > len) {
if (index < show) {
for (var i = 1; i < 9; i++) {
li = $("<li />").html('<a href="#">' + i + '</a>');
if (i === index + 1) li.addClass("active");
_p.append(li);
}
_p.append(li);
$("<li />").html('<a href="#">...</a>').appendTo(_p);
li = $("<li />").html('<a href="#">' + _page + '</a>');
_p.append(li);
}
if (index >= show && index <= _page - show) {
/* 第一页*/
li = $("<li />").html('<a href="#">1</a>');
_p.append(li);
$("<li />").html('<a href="#">...</a>').appendTo(_p);
/*中间页*/
for (var i = index - 2; i < index + 6; i++) {
li = $("<li />").html('<a href="#">' + i + '</a>');
if (i === index + 1) li.addClass("active");
_p.append(li);
}
/* 最后页*/
$("<li />").html('<a href="#">...</a>').appendTo(_p);
li = $("<li />").html('<a href="#">' + _page + '</a>');
_p.append(li);
}
if (index > _page - show) {
/* 第一页 */
li = $("<li />").html('<a href="#">1</a>');
_p.append(li);
$("<li />").html('<a href="#">...</a>').appendTo(_p);
/* 中间页 */
for (var i = _page - 8; i < _page + 1; i++) {
li = $("<li />").html('<a href="#">' + i + '</a>');
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分页。先存着了,有时候再改
地址分享:https://www.cdcxhl.com/article32/jidhpc.html
成都网站建设公司_创新互联,为您提供小程序开发、、移动网站建设、网站策划、品牌网站建设、网站设计
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联