首页 > 代码库 > 一款基于jQuery的分页插件
一款基于jQuery的分页插件
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过。如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/
1、效果示例
2、代码样式
/* * 基于jquery 分页插件 * by mao2080@sina.com */ $(function (){ window.pageUtil = { /** * 构建分页 * @param {Object} divId 要绑定的容器 * @param {Object} data 查询数据 * @param {Object} args 参数信息 */ page : function(divId, data, args){ var pager = $(divId); var pageInfo = (!data || !data.data)?{"currPage":0,"pageSize":10,"pageTotal":0,"recordTotal":0,"prevPage":0,"nextPage":0,"firstPage":0,"lastPage":0}:data.data; pageInfo.pageTotal = this.getPageTotal(pageInfo); var html = "<table><tbody><tr>"; if(!args.hidePageSelect){ html+=‘<td>显示行数</td>‘; html+=‘<td>‘; if(!args.pageSelect){ html+=this.getPageSelect([10, 20, 50],pageInfo.pageSize); }else{ html+=this.getPageSelect(args.pageSelect, pageInfo.pageSize); } html+=‘</td>‘; } html+=‘<td>共‘+pageInfo.pageTotal+‘页,</td>‘; html+=‘<td>转到</td><td><input type="text" value="http://www.mamicode.com/‘+pageInfo.currPage+‘" size="5" class="page-turn"></td>‘; html+=‘<td>页 第‘+this.getRowRange(pageInfo)+‘项</td>‘; html+=‘<td>,共‘+pageInfo.recordTotal+‘项</td>‘; html+=‘<td>‘; if(pageInfo.currPage == 1){ html+=‘<input type="button" value="http://www.mamicode.com/Prev" class="page-prev page-button-disable">‘; }else{ html+=‘<input type="button" value="http://www.mamicode.com/Prev" class="page-prev">‘; } if(pageInfo.currPage == pageInfo.pageTotal){ html+=‘<input type="button" value="http://www.mamicode.com/Next" class="page-next page-button-disable">‘; }else{ html+=‘<input type="button" value="http://www.mamicode.com/Next" class="page-next">‘; } html+=‘</td>‘; html+=‘</tr></tbody></table>‘; pager.html(html); pager.find(".page-select").off("change").bind("change", function(){ if(args.query){ args.query(1, $(this).val()); } }); pager.find(".page-turn").off("keypress").bind("keypress", function(event){ if(event.keyCode == "13" && args.query){ var pages = $(this).val(); if(/^\+?[1-9][0-9]*$/.test(pages) && (pages*1> 0 && pages*1 <= pageInfo.pageTotal)){ args.query(pages, pageInfo.pageSize); }else{ alert("请输入1~"+pageInfo.pageTotal+"的数字."); } } }); pager.find(".page-prev").off("click").bind("click", function(){ if(args.query && !$(this).hasClass("page-button-disable")){ args.query(pageInfo.currPage-1, pageInfo.pageSize); } }); pager.find(".page-next").off("click").bind("click", function(){ if(args.query && !$(this).hasClass("page-button-disable")){ args.query(pageInfo.currPage+1, pageInfo.pageSize); } }); }, /** * 获取总页数 * @param {Object} data */ getPageTotal : function(data){ if(data.recordTotal == 0){ return 0; } if(data.recordTotal%data.pageSize == 0){ return data.recordTotal/data.pageSize; }else{ return parseInt(data.recordTotal/data.pageSize)+1; } }, /** * 获取当前数据行数范围 * @param {Object} data */ getRowRange : function(data){ if(data.recordTotal == 0){ return "0-0"; } if(data.currPage < data.pageTotal){ return ((data.currPage-1)*data.pageSize+1)+"-"+(data.currPage)*data.pageSize; }else{ return ((data.currPage-1)*data.pageSize+1)+"-"+(data.recordTotal); } }, /** * 构建分页下拉框 * @param {Object} pageSelect 分页条数 * @param {Object} pageSize 一页大小 */ getPageSelect : function(pageSelect, pageSize){ var pageSel = ‘<select class="page-select">‘; for(var i in pageSelect){ if(pageSelect[i] == pageSize){ pageSel+="<option selected=‘selected‘ value="http://www.mamicode.com/+pageSelect[i]+">"+pageSelect[i]+"</option>"; }else{ pageSel+="<option value="http://www.mamicode.com/+pageSelect[i]+">"+pageSelect[i]+"</option>"; } } return pageSel+"</select>"; } }; });
3、资料下载
page-demo.rar
一款基于jQuery的分页插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。