跳转到主内容
websoft网络软件专家 - 深耕网络技术,打造实用软件!

js实现分页显示的代码

本文主要和大家分享js实现分页显示的代码,希望能帮助到大家。 1.html页面中代码如下

2.HTML中js代码引用
3、js抽出文件
var paginate={ curPage:1, totalPage:0, pageSize:5, pageHtml:'${dpy}', // 页码html模板 totalHtmlBefore:' ',//总页数html totalHtmlAfter:'', use:function(_curPage,_pageSize){ this.curPage = _curPage; this.pageSize = _pageSize; }, // 展示分页信息 showPage:function(maxPage, start, curPage){ // 清空分页信息 $(".page").html(""); // 加载分页信息 var list = paginate.createPageData(maxPage, start); model.loaderList(list, this.pageHtml, ".page"); // 显示总页数 $(".page").append(this.totalHtmlBefore + curPage+"/" +this.totalPage + this.totalHtmlAfter); // 显示当前页样式 $(".page a").css("color","#aee1ff"); $(".page a[href='javascript:page("+this.curPage+")']").css("color","#FF0000"); }, // 创建页码数据列表 createPageData:function(curPage, start){ var numList = []; numList.push(paginate.createObj(-1)); for(var i=start; i<=curPage; i++){ var numObj = paginate.createObj(i); if(numObj != null) numList.push(numObj); } numList.push(paginate.createObj(-2)); return numList; }, // 创建页码数据 createObj:function(i){ var numObj = {}; if(i == -2){ numObj.num = "-2"; numObj.dpy = ">"; }else if(i == -1){ numObj.num = "-1"; numObj.dpy = "<"; }else{ numObj.num = i+""; numObj.dpy = i+""; } return numObj; }, getCurPage:function(page){ if(page == "-2"){ paginate.curPage = paginate.curPage +1; }else if(page == "-1"){ paginate.curPage = paginate.curPage-1; }else{ paginate.curPage = page; } }, // 跳转 goPage:function(params){ // 当前页计算 paginate.getCurPage(params.page); if(paginate.curPage < 1){ paginate.curPage = 1; return; } // 查询信息 $.get(params.url+"&pageNum="+paginate.curPage+"&pageSize="+paginate.pageSize, function(result) { // 当前页大于总页数,数据不刷新 paginate.totalPage = result.totalPage; if(paginate.curPage > result.totalPage){ paginate.curPage = result.totalPage; return; } // 当前页小于6页 if(paginate.curPage < 6){ var maxPage = result.totalPage; if(maxPage > 5)maxPage=5; paginate.showPage(maxPage, 1, paginate.curPage); }else{ paginate.showPage(paginate.curPage, paginate.curPage-4, paginate.curPage); } // 列表信息显示 $(params.contaner).html(''); model.loaderList(result.data, params.template, params.contaner); $(".cbp_tmlabel").css("opacity", "1");// 显示列表信息 }); } };
4、接口返回类型 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载

相关文章