分享一个简洁的分页插件
程序员文章站
2024-02-20 08:30:58
...
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
<style>
*{
padding: 0;
margin: 0;
}
/*分页图标*/
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1542248625101'); /* IE9*/
src: url('iconfont.eot?t=1542248625101#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1542248625101') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1542248625101#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-iconfontjiantou5:before { content: "\e635"; }
.icon-gengduo1:before { content: "\e625"; }
.icon-fanhui:before { content: "\e600"; }
.icon-gengduo:before { content: "\e601"; }
.icon-guanbi:before { content: "\e7be"; }
.icon-guanbi1:before { content: "\e611"; }
.icon-shangyimian:before { content: "\e610"; }
.icon-xiayimian:before { content: "\e612"; }
.icon-xiala:before { content: "\e658"; }
.icon-huhuanx:before { content: "\e64e"; }
/*分页样式*/
.page_div {margin-top: 20px;margin-bottom: 20px;font-size: 15px;font-family: "microsoft yahei";color: #999;box-sizing: border-box;clear: both;overflow: hidden;}
.page_div a {display: inline-block;margin-right: 5px;border-radius: 4px;border: 1px solid #d7d7d7;width: 38px;height: 35px;text-align: center;line-height: 35px;cursor: pointer;color: #999;font-weight: 200;}
.page_div .pNum:hover{background: #4091fc;color: #fff !important;border: 1px solid #4091fc !important;}
.goPage {width: 38px;height: 35px;font-size: 15px;color: #333;line-height: 30px;border: 1px solid #d7d7d7;border-radius: 4px;text-align: center;outline: none;margin: 0 10px;}
#firstPage{width: 50px;color: #0073A9;border: 1px solid #0073A9!important;}
#lastPage {background: #4091fc;width: 60px !important;border: 0;margin-right: 0;color: #fff;}
#prePage,#nextPage {border-radius: 4px;border: 1px solid #d7d7d7;width: 38px;height: 35px;text-align: center;line-height: 35px;cursor: pointer;color: #999;font-weight: 200;}
.page_div .current {background: #4091fc;color: #fff !important;border: 1px solid #4091fc !important;}
.totalPages {margin: 0 10px;}
.totalPages span,.totalSize span {color: #999;margin: 0 5px;}
.divPage{float: right;}
.page-s{
line-height: 40px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
(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
};
this.init();
}
Paging.prototype = {
constructor: Paging,
init: function() {
this.creatHtml();
this.bindEvent();
},
creatHtml: function() {
var me = this;
var content = "";
var current = (parseInt($(".totalPages .goPage").val()) > 0 ? parseInt($(".totalPages .goPage").val()) : me.options.pageNo);
var total = me.options.totalPage;
var totalNum = me.options.totalSize;
var pageNum = $(".totalPages .goPage").val()
console.log(total)
content += "<span class='page-s'>当前第"+current+"页，共"+total+"页，<span><span class='totalSize'> 共<span>" + totalNum + "</span>条记录 </span>";
content += "<div class='divPage'><a id='prePage' class='pNum'><span class=\"iconfont icon-fanhui\" style=\"position: relative;left: 3px;\"></span></a>";
if(total > 6) {
if(current < 5) {
for(var i = 1; i < 6; i++) {
if(current == i) {
content += "<a class='current pNum'>" + i + "</a>";
} else {
content += "<a class='pNum'>" + i + "</a>";
}
}
content += "<a>. . .</a>";
content += "<a class='pNum'>" + total + "</a>";
} else {
if(current < total - 3) {
content += "<a class='pNum'>1</a>";
content += "<a>. . .</a>";
for(var i = current - 2; i < current + 3; i++) {
if(current == i) {
content += "<a class='current pNum'>" + i + "</a>";
} else {
content += "<a class='pNum'>" + i + "</a>";
}
}
content += "<a>. . .</a>";
content += "<a class='pNum'>" + total + "</a>";
} else if(current > total){
content += "<a class='pNum'>1</a>";
content += "<a>. . .</a>";
for(var i = total - 4; i < total + 1; i++) {
if(total == i) {
content += "<a class='current pNum'>" + i + "</a>";
} else {
content += "<a class='pNum'>" + i + "</a>";
}
}
} else {
content += "<a class='pNum'>1</a>";
content += "<a>. . .</a>";
for(var i = total - 4; i < total + 1; i++) {
if(current == i) {
content += "<a class='current pNum'>" + i + "</a>";
} else {
content += "<a class='pNum'>" + i + "</a>";
}
}
}
}
} else {
for(var i = 1; i < total + 1; i++) {
if(current == i) {
content += "<a class='current pNum'>" + i + "</a>";
} else {
content += "<a class='pNum'>" + i + "</a>";
}
}
}
content += "<a id='nextPage' class='pNum'><span class=\"iconfont icon-gengduo\" style=\"position: relative;left: -3px;\"></span></a>";
content += "<span class='totalPages'>到第<span><input type=\"text\" class = \"goPage\" width=\"30\" height=\"30\"/></span>页 </span>";
content += "<a id=\"lastPage\">确定</a>";
content += "</div>";
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;
return;
} 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
return;
} else {
me.options.pageNo = +me.options.pageNo + 1;
}
} else if(id == "lastPage") {
var pageNum = $(".totalPages .goPage").val()
if(pageNum < me.options.totalPage && pageNum >= 1){
me.options.pageNo = pageNum;
}else if(pageNum < 1){
me.options.pageNo = 1;
}else{
me.options.pageNo = me.options.totalPage
}
}else {
if(me.options.pageNo == parseInt(num) || num == '. . .'){
return;
}else{
me.options.pageNo = +num;
}
}
me.creatHtml();
if(me.options.callback) {
me.options.callback(me.options.pageNo);
}
});
me.element.off('keydown', 'input');
me.element.on('keydown', 'input', function() {
var id = $(this).attr("id");
var num = $(this).html();
var curkey = event.which;
if(curkey == 13){
var pageNum = $(".totalPages .goPage").val()
if(pageNum < me.options.totalPage && pageNum >= 1){
me.options.pageNo = pageNum;
}else if(pageNum < 1){
me.options.pageNo = 1;
}else{
me.options.pageNo = me.options.totalPage
}
me.creatHtml();
if(me.options.callback) {
me.options.callback(me.options.pageNo);
}
}
})
}
};
$.fn.paging = function(options) {
return new Paging($(this), options);
}
})(jQuery, window, document);
</script>
</head>
<body>
<div class="page_div"></div>
<script type="text/javascript">
$('.page_div').paging({
pageNo: 1,
totalPage: 10,
totalSize: 100,
callback: function(e){
console.log(e);
console.log('分页回调')
}
});
</script>
</body>
</html>
上一篇： pagehelper工具分页操作
下一篇： 分页方法