前言:
之前的分页有个问题在于,当总页数只有一页的时候,也显示了这个分页
所以要前台判断总页数,大于一页或等于一页时候,分别显示隐藏分页
现在把这个判断放在封装好的函数里,前台就不用判断了,直接使用
等于一页的时候,不显示分页,大于一页的时候,显示分页
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>分页</title>
<style type="text/css">
.pages{text-align: center;}
.page_div {
margin-top: 20px;
margin-bottom: 20px;
font-size: 15px;
font-family: "microsoft yahei";
color: #666666;
margin-right: 10px;
padding-left: 20px;
box-sizing: border-box;
}
/*
* 页数按钮样式
*/
.page_div a {
min-width: 40px;
border: 1px solid #E3E3E3;
height: 40px;
text-align: center;
margin: 0 4px;
cursor: pointer;
line-height: 40px;
border-radius: 4px;
font-size: 13px;
display: inline-block;
}
.page_div a:hover{
background: #008C5F;
color: #fff;
}
#firstPage,
#lastPage {
width: 50px;
/*color: #0073A9;*/
/*border: 1px solid #0073A9!important;*/
}
#prePage,
#nextPage {
width: 70px;
/*color: #0073A9;*/
/*border: 1px solid #0073A9!important;*/
}
.page_div .current {
background-color: #008C5F;
border-color: #0073A9;
color: #FFFFFF;
}
.totalPages {
margin: 0 10px;
}
.totalPages span,
.totalSize span {
color: #0073A9;
margin: 0 5px;
}
</style>
</head>
<body>
<p>分页</p>
<!--分页-->
<div class="pages">
<div value="1 0"></div>
<div id="page" class="page_div"></div>
</div>
<script src="jquery.min.js"></script>
<script src="paging.js"></script>
<script type="text/javascript">
// $("#page").paging({
// pageNo:1,
// totalPage: 1,
// callback: function(num) {
// console.log(num)
// }
// })
$("#page").paging({
pageNo:1,
totalPage: 13,
callback: function(num) {
console.log(num)
}
})
/*
// 模拟ajax数据用以下方法
//参数为当前页
ajaxTest(1);
function ajaxTest(num) {
$.ajax({
url: "table.json",
type: "get",
data: {},
dataType: "json",
success: function(data) {
console.log(data);
//分页
$("#page").paging({
pageNo: num,
totalPage: data.totalPage,
totalSize: data.totalSize,
callback: function(num) {
ajaxTest(num)
}
})
}
})
}
*/
</script>
</body>
</html>
引入的paging.js
(function($, window, document, undefined) {
//定义分页类
function Paging(element, options) {
this.element = element;
//传入形参
this.options = {
pageNo: options.pageNo||1,
totalPage: options.totalPage,
totalSize:options.totalSize,
callback:options.callback
};
//根据形参初始化分页html和css代码
this.init();
}
//对Paging的实例对象添加公共的属性和方法
Paging.prototype = {
constructor: Paging,
init: function() {
this.creatHtml();
this.bindEvent();
},
creatHtml: function() {
var me = this;
var content = "";
var current = me.options.pageNo;
var total = me.options.totalPage;
var totalNum = me.options.totalSize;
content += "<a id=\"firstPage\">首页</a><a id='prePage'>上一页</a>";
//总页数大于6时候
if(total > 6) {
//当前页数小于5时显示省略号
if(current < 5) {
for(var i = 1; i < 6; i++) {
if(current == i) {
content += "<a class='current'>" + i + "</a>";
} else {
content += "<a>" + i + "</a>";
}
}
content += ". . .";
content += "<a>"+total+"</a>";
} else {
//判断页码在末尾的时候
if(current < total - 3) {
for(var i = current - 2; i < current + 3; i++) {
if(current == i) {
content += "<a class='current'>" + i + "</a>";
} else {
content += "<a>" + i + "</a>";
}
}
content += ". . .";
content += "<a>"+total+"</a>";
//页码在中间部分时候
} else {
content += "<a>1</a>";
content += ". . .";
for(var i = total - 4; i < total + 1; i++) {
if(current == i) {
content += "<a class='current'>" + i + "</a>";
} else {
content += "<a>" + i + "</a>";
}
}
}
}
//页面总数小于6的时候
} else {
for(var i = 1; i < total + 1; i++) {
if(current == i) {
content += "<a class='current'>" + i + "</a>";
} else {
content += "<a>" + i + "</a>";
}
}
}
content += "<a id='nextPage'>下一页</a>";
content += "<a id=\"lastPage\">尾页</a>";
content += "<span class='totalPages'> 共<span>"+total+"</span>页 </span>";
// content += "<span class='totalSize'> 共<span>"+totalNum+"</span>条记录 </span>";
if(total>1){
me.element.html(content);
}
},
//添加页面操作事件
bindEvent: function() {
var me = this;
me.element.off('click', 'a');
me.element.on('click', 'a', function() {
var num = $(this).html();
var id=$(this).attr("id");
if(id == "prePage") {
if(me.options.pageNo == 1) {
me.options.pageNo = 1;
} else {
me.options.pageNo = +me.options.pageNo - 1;
}
} else if(id == "nextPage") {
if(me.options.pageNo == me.options.totalPage) {
me.options.pageNo = me.options.totalPage
} else {
me.options.pageNo = +me.options.pageNo + 1;
}
} else if(id =="firstPage") {
me.options.pageNo = 1;
} else if(id =="lastPage") {
me.options.pageNo = me.options.totalPage;
}else{
me.options.pageNo = +num;
}
me.creatHtml();
if(me.options.callback) {
me.options.callback(me.options.pageNo);
}
});
}
};
//通过jQuery对象初始化分页对象
$.fn.paging = function(options) {
return new Paging($(this), options);
}
})(jQuery, window, document);