jquery 结合bootstrap样式的前端分页
2016-08-22 22:20
344 查看
直接秀代码
初始化时调用getMaxPage(total)获取共有多少页,然后修改search函数创建你自己的table
var pagination = { nowPage : 1, pageNum : 15, maxPage: undefined, search:function(){ var result = search(this.getStartNum(),this.pageNum,searchParams) if(result != undefined || result != null){ this.maxPage = this.getMaxPage(result) } this.createPage() }, previousPage:function(){ if(this.nowPage>1) this.nowPage-- }, nextPage:function () { if (this.nowPage<this.maxPage) this.nowPage++ }, skip:function(skipNum){ this.nowPage = skipNum this.search() }, createPage:function(){ var html='' var prefix = '<li><a href="#" onclick="pagination.skip(1)">«</a></li>' var last = '<li><a href="#" onclick="pagination.skip('+this.maxPage+')">»</a></li>' html += prefix if (this.maxPage <= 11){ for(var i = 1 ; i <= this.maxPage ; i++){ var clickPage = i==this.nowPage?' class="active"' : ' ' html += '<li'+clickPage+'><a href="#" onclick="pagination.skip('+i+')">'+i+'</a></li>' } }else{ if (this.nowPage <= 5){ for(var i = 1 ; i <= 11 ; i++){ var clickPage = i==this.nowPage?' class="active"' : ' ' html += '<li'+clickPage+'><a href="#" onclick="pagination.skip('+i+')">'+i+'</a></li>' } }else if(this.nowPage >= this.maxPage - 5){ for(var i = this.maxPage-11 ; i <= this.maxPage ; i++){ var clickPage = i==this.nowPage?' class="active"' : ' ' html += '<li'+clickPage+'><a href="#" onclick="pagination.skip('+i+')">'+i+'</a></li>' } }else{ for(var i = this.nowPage-5 ; i <= this.nowPage+5 ; i++){ var clickPage = i==this.nowPage?' class="active"' : ' ' html += '<li'+clickPage+'><a href="#" onclick="pagination.skip('+i+')">'+i+'</a></li>' } } } html += last $('.pagination').html(html) }, getStartNum:function(){ return (this.nowPage-1)*this.pageNum }, getEndNum:function(){ return this.nowPage*this.pageNum }, getMaxPage:function(total){ return Math.ceil(total/this.pageNum) } }
/** * 搜索 * @param params 上传参数 */ var search = function (start,end,params) { var result $.ajax({ url:'/dola/admin/userlist/'+start+'/'+end , type:'get', dataType:'json', data:params, async:false, success:function(data){ if(data.success){ result = parseInt(data.message) tableData=data.data; load(tableData) } } }); return result }
初始化时调用getMaxPage(total)获取共有多少页,然后修改search函数创建你自己的table
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子