做个记录备份下
/**
* Created by lgy on 2017/12/19.
* page插件
*/
(function ($) {
$.fn.lgypage = function (options) {
//初始化参数
var defaults = {
totalpage:0, //总页数
showpagenum:8, //默认显示的页数
showlr:"left", //left:靠左显示,right: 靠右显示,center:居中显示
curpage: 1 , //当前页
clickback:"", //点击回调事件
isSearch:true, //是否显示数字搜索栏
pagenum1:5, //判断剩余页面数大于值
pagenum2:3, //前后差值
lastpagenum:6, //最后剩余数
isshowpage:true
};
var opts = $.extend(defaults, options);
return this.each(function () {
var $this = $(this);//获取当前对象
refreshhtml(opts.curpage);
//页数刷新
function refreshhtml(curpage) {
var showlr="";
if(opts.showlr=="right"){
showlr='style="float:right;"';
}
var html='<div class="lgy-table-page">' +
' <ul class="lgy-page-ul" '+showlr+'>';
//如果总页面大于默认显示的页数
if(opts.totalpage>opts.showpagenum){
var active="";
if(curpage==1){
active="class=active";
}
html+='<li '+active+'><a href="javascript:;">1</a></li>';
if(curpage<opts.showpagenum){
for(var i=1; i<opts.showpagenum;i++){
var nownum=i+1;
if(curpage==nownum){
html+='<li class="active"><a href="javascript:;">'+nownum+'</a></li>';
}else{
html+='<li><a href="javascript:;">'+nownum+'</a></li>';
}
}
html+='<li>…</li>';
}else{
//当前页大于默认页
//剩余页面大于5
if(opts.totalpage-curpage>opts.pagenum1){
html+='<li>…</li>';
for(var i=curpage-opts.pagenum2; i<=curpage+opts.pagenum2;i++){
if(curpage==i){
html+='<li class="active"><a href="javascript:;">'+i+'</a></li>';
}else{
html+='<li><a href="javascript:;">'+i+'</a></li>';
}
}
html+='<li>…</li>';
}else{
//剩余页面小于等于5
html+='<li>…</li>';
for(var i=opts.totalpage-opts.lastpagenum; i<opts.totalpage;i++){
if(curpage==i){
html+='<li class="active"><a href="javascript:;">'+i+'</a></li>';
}else{
html+='<li><a href="javascript:;">'+i+'</a></li>';
}
}
}
}
//如果当前页是最后一页
var lastactive="";
if(curpage==opts.totalpage){
lastactive="class=active";
}
html+='<li '+lastactive+'><a href="javascript:;">'+opts.totalpage+'</a></li>';
if(opts.isshowpage){
if(curpage>1){
html+='<li class="lgy-pre">上一页</li>';
}
if(curpage<opts.totalpage){
html+='<li class="lgy-next">下一页</li>';
}
//是否显示搜索栏
if(opts.isSearch){
html+='<li class="lgy-gopage"><div class="lgy-gopage-p"><span>到第</span> <span><input type="text" class="lgy-input-page" οnkeyup="value=value.replace(/[^\\d]/g,\'\')" value="'+curpage+'"></span> <span>页</span></div><div class="lgy-page-ok">确定</div></li>';
}
}
}else{
for(var i=1; i<(opts.totalpage+1);i++){
if(curpage==i){
html+='<li class="active"><a href="javascript:;">'+i+'</a></li>';
}else{
html+='<li><a href="javascript:;">'+i+'</a></li>';
}
}
}
html+= '</ul></div>';
$this.html(html);
if(opts.showlr=="right"){
$this.find(".lgy-page-ul li").css({
"margin-left":"10px",
"margin-right":"0"
});
}else if(opts.showlr=="center"){
$this.find(".lgy-table-page").css({
"text-align":"center"
});
}
//页数点击事件
$this.find(".lgy-page-ul li a").unbind('click').click(function(){
var curnum=parseInt($(this).html());
opts.curpage=curnum;
//回调页数
opts.clickback(opts.curpage);
refreshhtml(curnum);
});
//下一页点击事件
$this.find(".lgy-next").unbind('click').click(function(){
var curnum=opts.curpage;
if(curnum<opts.totalpage){
opts.curpage+=1;
//回调页数
opts.clickback(opts.curpage);
refreshhtml(opts.curpage);
}
//refreshhtml(curnum);
});
//上一页点击事件
$this.find(".lgy-pre").unbind('click').click(function(){
var curnum=opts.curpage;
if(curnum>1){
opts.curpage-=1;
//回调页数
opts.clickback(opts.curpage);
refreshhtml(opts.curpage);
}
//refreshhtml(curnum);
});
//确定点击事件
$this.find(".lgy-page-ok").unbind('click').click(function(){
var curnum=parseInt($this.find(".lgy-input-page").val());
if(curnum>opts.totalpage){
opts.curpage=opts.totalpage;
}else if(curnum<1){
opts.curpage=1;
}else{
opts.curpage=curnum;
}
//回调页数
opts.clickback(opts.curpage);
refreshhtml(opts.curpage);
});
}
});
};
})(jQuery);
页面部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页插件</title>
<link rel="stylesheet" href="css/lgyplug.css" />
</head>
<body>
<div id="page"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.lgypage.min.js"></script>
<script>
(function(){
$("#page").lgypage({
totalpage:50,
//showlr:"right",
clickback: function(data){
console.log("页数:"+data);
}
});
}());
</script>
</body>
</html>
样式部分
/*分页样式*/
.lgy-table-page{
width: 100%;
}
.lgy-table-page ul{
margin: 0;
padding: 0;
display: inline-block;
list-style: none;
}
.lgy-page-ul a{
text-decoration: none;
color: #000;
}
.lgy-page-ul li{
cursor: pointer;
float: left;
margin-right:10px;
}
.lgy-page-ul li a{
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
display: block;
border: 1px solid #ddd;
}
.lgy-page-ul li a:hover{
border: 1px solid #44b549;
background-color: #44b549;
color:#fff;
}
.lgy-page-ul li.active a{
border: 1px solid #44b549;
background-color: #44b549;
color:#fff;
}
.lgy-page-ul li.lgy-pre, .lgy-page-ul li.lgy-next{
height: 30px;
line-height: 30px;
border: 1px solid #ddd;
padding: 0 10px;
}
.lgy-page-ul li.lgy-pre:hover, .lgy-page-ul li.lgy-next:hover{
border: 1px solid #44b549;
background-color: #44b549;
color:#fff;
}
.lgy-gopage input{
width: 40px;
height: 28px;
text-align: center;
line-height: 28px;
border: 1px solid #ddd;
}
.lgy-gopage div{
float: left;
margin-left: 10px;
}
.lgy-gopage .lgy-page-ok{
width: 50px;
text-align: center;
height: 30px;
line-height: 30px;
border: 1px solid #ddd;
}
.lgy-gopage .lgy-page-ok:hover{
border: 1px solid #44b549;
background-color: #44b549;
color:#fff;
}
.lgy-gopage-p{
white-space: nowrap;
}
.lgy-gopage-p span{
float: left;
height: 32px;
margin-right: 5px;
line-height: 32px;
display: inline-block;
}