时间:2021-07-01 10:21:17 帮助过:7人阅读
1.HTML页面中代码如下
<p class="page"> </p>
2.HTML中js代码引用
<script src="js/jquery.min.js"></script> <script src="js/model.js"></script> <script src="js/page.js"></script>
<script type="text/javascript"> $(function() { // 初始化信息 paginate.use(1, 5); page(1); }); // 初始化变量 var url = model.bhost + "api/article/list.ht?type=1"; var template = $("#list_info").html(); /**翻页 */ function page(page){ paginate.goPage({url:url,template:template,contaner:".cbp_tmtimeline",page:page}); } </script>
3、js抽出文件
var paginate={ curPage:1, totalPage:0, pageSize:5, pageHtml:'<a href="javascript:page(${num})">${dpy}</a>', // 页码html模板 totalHtmlBefore:' <a title="Total record"><b id="total_num">',//总页数html totalHtmlAfter:'</b></a>', 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、接口返回类型
以上就是js实现分页显示的代码的详细内容,更多请关注Gxl网其它相关文章!