Home >Web Front-end >JS Tutorial >Upgrade the jquery paging written before_jquery
The paging I wrote before has been used for a long time, but when paging, in addition to the page, sometimes some other parameters are also passed. In the past, the passed parameters were put into the hidden hidden, and then taken out during paging, which was more troublesome. , I have nothing to do today, so I repackaged it
Just go to the code
The css uses the paging style in bootstrap
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } .pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .pagination-sm > li > a, .pagination-sm > li > span { padding: 5px 10px; font-size: 12px; } .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
Pagination code:
(function ($) { var PageFunc = function PageFunc() { } $.PageFunc = function (Total, PageSize, curPageNum, FunUrl,paramStr) { if (PageSize == "" || PageSize == null || PageSize == undefined) { PageSize = 10; } if (curPageNum == "" || curPageNum == null || curPageNum == undefined) { curPageNum = 1; } var hasParam=true; if (paramStr == "" || paramStr == null || paramStr == undefined) { hasParam = false; } //计算总页数 Total = parseInt(Total); //总记录数 PageSize = parseInt(PageSize); //每页显示数 curPageNum = parseInt(curPageNum); //当前页 //总页数 var AllPage = Math.floor(Total / PageSize); if (Total % PageSize != 0) { AllPage++; } var navHtml = "<ul style='margin:0 0 0 0;' class='pagination'>"; if (curPageNum <= 0) curPageNum = 1; if (AllPage > 1) { if (curPageNum != 1) { //处理首页连接 var home=1; if(hasParam) { home=home+","+paramStr; } navHtml += "<li><a href='javascript:" + FunUrl + "("+home+")' >|<</a></li>"; } if (curPageNum > 1) { var previous=parseInt(parseInt(curPageNum) - 1); if(hasParam) { previous=previous+","+paramStr; } //处理上一页的连接 navHtml += "<li><a href='javascript:"+FunUrl+"("+previous+")' ><<</a></li>"; } else { navHtml += "<li class='disabled'><a><<</a></li>"; } var currint = 5; for (var i = 0; i <= 10; i++) { //一共最多显示10个页码,前面5个,后面5个 if ((curPageNum + i - currint) >= 1 && (curPageNum + i - currint) <= AllPage) if (currint == i) { //当前页处理 navHtml += "<li class='active'><a>" + curPageNum + "<span class='sr-only'>(current)</span></a></li>"; } else { //一般页处理 var n = parseInt(parseInt(curPageNum) + parseInt(i) - parseInt(currint)); var nstr=n; if(hasParam) { nstr=nstr+","+paramStr; } navHtml += "<li><a href='javascript:" + FunUrl + "("+nstr+")'>" + n + "</a></li>"; } } if (curPageNum < AllPage) { //处理下一页的链接 var next=parseInt(parseInt(curPageNum) + 1); if(hasParam) { next=next+","+paramStr; } navHtml += "<li><a href='javascript:" + FunUrl + "("+next+")'>>></a></li>"; } else { navHtml += "<li class='disabled'><a>>></a></li>"; } if (curPageNum != AllPage) { var last=parseInt(AllPage); if(hasParam) { last=last+","+paramStr; } navHtml += "<li><a href='javascript:" + FunUrl + "("+last+")' >>|</a></li>"; } } if(parseInt(AllPage)!=0) { navHtml += "<li><a>" + curPageNum + "/" + AllPage + "</a></li> "; } navHtml+="</ul>"; return navHtml; }; })(jQuery);
Calling method:
Note: The first parameter must be the value of the current page
function aa(curpage,param1,param2){ if (curpage == "" || curpage == null || curpage == undefined) { curpage = 1; } var pagesize = 5; var paramStr=""; paramStr=param1+","+param2+"; $.post("/appdefult/apporder",{"categoryId":param1,"name":param2,"curpage":curpage,"pagesize":pagesize},function(mydata){ var pageHtml= $.PageFunc(mydata.total, pagesize, curpage, "aa",paramStr); $(".page").html(pageHtml); },"json"); }