html 分页_JQuery堪称完美的分页函数

演示效果：

html部分（引入jquery.js）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery简单的分页插件</title>
</head><link rel="stylesheet" href="css/pagination.css" /><script src="/uploads/allimg/200420/150KI242-1.jpg"></script>
<script src="js/pagination.js"></script><body>
<center>
<div class="box" id="wrap1"></div>
</center>
<script type="text/javascript">var onPagechange = function(page){console.log('当前点击页码',page);}var obj = {wrapid:'wrap1', //页面显示分页器容器idtotal:18891,//总条数pagesize:10,//每页显示10条currentPage:1,//当前页onPagechange:onPagechange,//btnCount:7 页数过多时，显示省略号的边界页码按钮数量，可省略，且值是大于5的奇数}pagination.init(obj);
</script></body>
</html>

css部分

.pagination-btn{padding: 0.06rem 0.10rem;margin-right: 4px;border-radius: 4px;border: 1px solid #ccc;cursor: pointer;color: #999;display: inline-block;box-sizing: border-box;width: 44px;text-align: center;
}
.pagination-wrap{position: relative;display: inline-block;padding-left: 0px;
}
.pagination-ellipsis{color: #999;position: relative;top: -5px;display: inline-block;padding: 0 0.12rem;margin-right: 4px;
}
.pagination-current{border:1px solid #3E8DDD;color:#3E8DDD;
}
.pagination-disabled{cursor: not-allowed;
}
#pagination-next,#pagination-prev{padding-right:0.08rem;padding-left:0.08rem;
}
.pagenum{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: middle;}

js部分

var pagination = pagination || {};
(function(){function Pagination(){}Pagination.prototype = {render: function(obj){/*显示分页器的容器元素id*/this._wrapid = '#'+obj.wrapid;this._total = obj.total;this._pagesize = obj.pagesize;this._currentPage = obj.currentPage;/*页码改变的回调函数*/this._cb = obj.onPagechange;/*设置页码超过多少个时，显示省略号*/if(obj.btnCount<5){obj.btnCount = 5;}else if(obj.btnCount%2==0){//非奇数obj.btnCount = obj.btnCount+1;}this._btnsValue = obj.btnCount?obj.btnCount:7;/*页码过多，左右都存在省略号时，当前点击页码左右两边的页码个数*/this._halfbtns = parseInt((this._btnsValue-3)/2);/*显示的总页面数*/this._btnNum = obj.total/obj.pagesize>parseInt(obj.total/obj.pagesize)?parseInt(obj.total/obj.pagesize)+1:parseInt(obj.total/obj.pagesize);   },bindEvent: function(){var that = this;/*页码点击*/$(that._wrapid).on('click','.pagenum',function(){that._currentPage = parseInt($(this).text());that._cb(that._currentPage);isshowMore.call(that);});/*上一页*/$(that._wrapid).on('click','#pagination-prev',function(){if($(this).hasClass('pagination-disabled')){return;}that._currentPage--;$('#pagination-next').hasClass('pagination-disabled')&&$('#pagination-next').removeClass('pagination-disabled');if(that._currentPage==1){$('#pagination-prev').addClass('pagination-disabled');}else{$('#pagination-prev').removeClass('pagination-disabled');}that._cb(that._currentPage);isshowMore.call(that);});/*下一页*/$(that._wrapid).on('click','#pagination-next',function(){if($(this).hasClass('pagination-disabled')){return;}that._currentPage++;$('#pagination-prev').hasClass('pagination-disabled')&&$('#pagination-prev').removeClass('pagination-disabled');if(that._currentPage==that._btnNum){$('#pagination-next').addClass('pagination-disabled');}else{$('#pagination-next').removeClass('pagination-disabled')}that._cb(that._currentPage);isshowMore.call(that);});isshowMore.call(this);/*判断省略符位置*/function isshowMore(){if(this._btnNum<=this._btnsValue){// console.log('不显示');creatBtns.call(this,'none')}else{if(this._currentPage<=(this._btnsValue-1-this._halfbtns)){//只显示后省略creatBtns.call(this,'after');}else if(this._currentPage>=this._btnNum-1-this._halfbtns){//只显示前省略creatBtns.call(this,'before')}else{//前后省略都显示creatBtns.call(this,'all')}}}/*创建页码按钮标签*/function creatBtns(ismorePosition){var html = '';var ismore = '...';var firstbtn = '1';var lastbtn = ''+this._btnNum+'';var prevbtn = '<';var nextbtn = '>'if(this._currentPage == 1){firstbtn = '1';prevbtn = '<'}if(this._currentPage == this._btnNum){lastbtn = ''+this._btnNum+'';nextbtn = '>'}if(ismorePosition == 'none'){for(var i = 1; i <= this._btnNum; i++){if(i == this._currentPage){html+= ''+i+'';}else{html += ''+i+'';}}}if(ismorePosition=="after"){// console.log('省略在后面');for(var i = 1; i <= this._btnsValue-1; i++){if(i == this._currentPage){html += ''+i+'';}else{html += ''+i+'';}}html = html + ismore + lastbtn;}if(ismorePosition=="before"){// console.log('省略在前面');html = html + firstbtn + ismore;for(var i=this._btnNum-(this._btnsValue-2);i<=this._btnNum;i++){if(i == this._currentPage){html+=''+i+'';}else{html+=''+i+'';}}}if(ismorePosition=="all"){// console.log('省略前后都有');var halfnum = parseInt((this._btnsValue-3)/2);html += firstbtn + ismore;for(var i = (this._currentPage-halfnum);i<=this._currentPage+halfnum+((this._btnsValue-3)%2);i++){if(i == this._currentPage){html += ''+i+''}else{html += ''+i+''}}html+=ismore+lastbtn;}$(this._wrapid).html(prevbtn+'
'+html+'
'+nextbtn);}},init:function(paginationObj){this.render(paginationObj);this.bindEvent();}}pagination.init = function(paginationObj){/*参数：wrapid,total,pagesize,currentPage,onPagechange[,btnCount]*/return new Pagination().init(paginationObj)}
})()

html 分页_JQuery堪称完美的分页函数相关推荐

android 支持各种格式的阅读器,android txt小说阅读器的实现（完美实现分页阅读，支持常见编码格式）...
前一阵由于项目的需求,需要一个预览txt文件的功能,于是自己写了一个,简单的txt文件阅读器,实现了点击分页切换.滑动分页切换,效果如下: 既然做出来,想整理一下实现的思路,有时间再封装一下,做成一个 ...
帝国cms搜索php分页,帝国cms灵动标签分页的实现方法
羊年到来之际,终于解决了灵动标签分页的问题了.一直以来在论坛有很多人帮助了我,总是索取没有奉献很过意不去,所以这里我也分享一下经验! 大家知道灵动标签在效率方面和使用上极其灵活,不象其他的标签你要掌握 ...
同一个html自动跳转分页,PageMenu分页控制器(基础篇)-相同分页页面的实现
说明:IOS没有自带的顶部滑动菜单栏控件,需要导入第三方库,我所使用的是PageMenu 界面展示菜单分页页面1.png 菜单分页页面2.png 菜单分页页面3.png 注意:此案例的菜单分页界面的 ...
dede列表分页php,dede列表页分页英文调用方法
使用于英文模板的dede分页代码,可以让分页默认中文变成英文的方式. 修改arc.listview.class.php 在include/arc.listview.class.php 调用方法 {de ...
oracle分页的方法,Oracle数据库分页的集中方法(三种方法)
在做项目中用到了分页,下面说一下oracle分页的方法; 采用伪列 rownum 查询前10条记录 [sql] select * from t_user t where ROWNUM <10; ...
element ui分页怎么做_elementUI实现分页
分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但数据量不能太大,因为前端是先一次性加载所有数据, ...
oracle分页性能不同,oracle高效分页
什么是分页查询对于基于Web的应用而言,对查询的结果集进行分页是一个比较常见的需求.假设浏览器界面每页可以显示10条记录,最初界面显示头10条记录给用户,当终端用户点击"下一页" ...
整合分页pageHelper||整合分页pageHelper-starter不用做任何分页相关的配置
修改pom.xml引入pageHelper的依赖 <dependency><groupId>com.github.pagehelper</groupId><a ...
【Java代码】未分页数据根据参数进行分页（粘贴可用）
1.需求说明某些时候一些常用的数据比如字典.元数据等在项目启动时已经全量加载到内存了,但是页面展示时要进行分页,这个时候有的前端 table 组件有分页功能,没有分页功能的就要后端进行处理了. 2. ...

html 分页_JQuery堪称完美的分页函数

html 分页_JQuery堪称完美的分页函数相关推荐

最新文章

热门文章