Oracle根據當前頁碼和條數算開始頁和結束頁：

int startrow = (currentPage - 1) * size + 1;
int endrow = currentPage?* size;

/*** 分頁工具*/ (function($) {$.extend({PageUtil:{}})})(jQuery);(function($) { $.extend($.PageUtil,{//默認每頁條數_pageSize:10,//獲取數據請求鏈接_getDataUrl:"",//檢索條件form的Id_filedFormId:"",//顯示區域的Id_showId:"",//默認顯示翻頁標簽個數_showPageTagNum:5,//當前選中頁_nowSelectedPageTagNum:1,//加載圖片路徑_loadImage:"",//初始化init: function(option){var $self = this;return $.extend(true,$self,option); },loadDataValid: function(){return false;},loadData: function(pageNum){ var $self=this;$self.showLoadDiv();var flg=this.loadDataValid();if(flg){return false;}$('.page').html('');//清空分頁var params = {};params["pageNumber"] = pageNum; params["objectsPerPage"] = $self._pageSize; if($self._filedFormId!=""){var $arrparams = $("#"+$self._filedFormId).find("input,select");var fields = $arrparams.serializeArray();$.each(fields,function(n,m){params[m.name] = m.value; }); } $.ajax({type : "post",async : false,url : this._getDataUrl,data : params,success : function(data) {data=JSON.parse(data);data["pageNum"]=pageNum;$self.genericHTML(data);}});}, genericHTML:function(data){var $self=this;$self.genericPageTag(parseInt(data.pageNum),parseInt(data.totalPage));$self.genericHTMLContent(data);$self.closeLoadDiv();},genericHTMLContent: function(json){}, genericPageTag: function(pageNum,pageCount){//count:數據條數;pageNum:當前頁碼;pageCount:總頁數if(pageCount<=0){$('.page').hide();return false;}else{$('.page').show();}var $self=this;var pageTagHTML='';//翻頁標簽拼接pageTagHTML+='<a name="firstPage">首頁</a>'; if(pageCount<=$self._showPageTagNum){ pageTagHTML+='<span name="prePage">上一頁</span>';for(var i = 1; i <= pageCount; i++){pageTagHTML+='<a name="pageTag" href="javascript:void(0);" attrVal="'+i+'" '+(i == $self._nowSelectedPageTagNum ? ' class="Selected"':'')+'>'+i+'</a>';} pageTagHTML+='<span name="nextPage" >下一頁</span>';}else{ pageTagHTML+='<span name="prePageTags"><<</span>';pageTagHTML+='<span name="prePage">上一頁</span>'; var showPageTagMaxNum=pageNum-1+$self._showPageTagNum;if(showPageTagMaxNum<pageCount){if(pageNum==1){for(var i = pageNum; i <= showPageTagMaxNum; i++){pageTagHTML+='<a name="pageTag" href="javascript:void(0);" attrVal="'+i+'" '+(i == $self._nowSelectedPageTagNum ? ' class="Selected"':'')+'>'+i+'</a>';}}else{ for(var i = pageNum-1; i <showPageTagMaxNum; i++){pageTagHTML+='<a name="pageTag" href="javascript:void(0);" attrVal="'+i+'" '+(i == $self._nowSelectedPageTagNum ? ' class="Selected"':'')+'>'+i+'</a>';}}}else{for(var i = pageCount-$self._showPageTagNum+1; i <= pageCount; i++){pageTagHTML+='<a name="pageTag" href="javascript:void(0);" attrVal="'+i+'" '+(i == $self._nowSelectedPageTagNum ? ' class="Selected"':'')+'>'+i+'</a>';}} pageTagHTML+='<span name="nextPage" >下一頁</span>';pageTagHTML+='<span name="nextPageTags">>></span>';}pageTagHTML+='<a name="endPage">末頁</a>';if(pageCount!=1){$('.page').html(pageTagHTML); }//翻頁標簽事件綁定//頁碼翻頁 $('.page').find("a[name=pageTag]").bind("click",function(){var pageParam = $(this).attr("attrVal"); pageParam =parseInt(pageParam);$self._nowSelectedPageTagNum=pageParam;$self.loadData($(this).attr("attrVal"));});//<<$('.page').find("span[name=prePageTags]").bind("click",function(){var pageParam =$('.page').find("a[name=pageTag]:first").attr("attrVal"); pageParam =parseInt(pageParam);var pageFirstParam=1;if(pageParam-$self._showPageTagNum<1){pageFirstParam=1; }else{pageFirstParam=pageParam-$self._showPageTagNum; }$self.genericPageTag(pageFirstParam,pageCount);});//>>$('.page').find("span[name=nextPageTags]").bind("click",function(){var pageParam =$('.page').find("a[name=pageTag]:first").attr("attrVal"); pageParam =parseInt(pageParam);if(pageParam+$self._showPageTagNum<=pageCount){$self.genericPageTag(pageParam+$self._showPageTagNum,pageCount);} });//首頁$('.page').find("a[name=firstPage]").bind("click",function(){$self._nowSelectedPageTagNum=1;$self.loadData('1');});//末頁$('.page').find("a[name=endPage]").bind("click",function(){$self._nowSelectedPageTagNum=pageCount;$self.loadData(pageCount);});//上一頁$('.page').find("span[name=prePage]").bind("click",function(){var pageParam = $(".Selected",$('.page')).attr("attrVal");if(pageParam==undefined){pageParam=$self._nowSelectedPageTagNum;}pageParam = parseInt(pageParam); if(pageParam<=1){return false;}$self._nowSelectedPageTagNum=pageParam-1;$self.loadData(pageParam-1);});//下一頁$('.page').find("span[name=nextPage]").bind("click",function(){var pageParam = $(".Selected",$('.page')).attr("attrVal");if(pageParam==undefined){pageParam=$self._nowSelectedPageTagNum;}pageParam =parseInt(pageParam);if(pageParam>=pageCount){return false;}$self._nowSelectedPageTagNum=pageParam+1;$self.loadData(pageParam+1);}); $self.addCheckedCss(this._nowSelectedPageTagNum,pageCount);}, //顯示加載圖片showLoadDiv: function(){$("img[name='loadImg']").attr("style","display: block; margin-left: 310px;");},//加載圖片消失closeLoadDiv: function(){$("img[name='loadImg']").attr("style","display: none; margin-left: 310px;");},addCheckedCss:function(pageNum,pageCount){//若當前頁為第一頁if(pageNum==1){$('.page').find("a[name=firstPage]").attr("style","cursor:default");$("span[name='prePage']").attr("style","cursor:default");}else{$('.page').find("a[name=firstPage]").attr("style","cursor:pointer;color:black;");$("span[name='prePage']").attr("style","cursor:pointer;color:black;");}//若當前頁為最后一頁if(pageNum==pageCount){$('.page').find("a[name=endPage]").attr("style","cursor:default");$("span[name='nextPage']").attr("style","cursor:default");}else{$('.page').find("a[name=endPage]").attr("style","cursor:pointer;color:black;");$("span[name='nextPage']").attr("style","cursor:pointer;color:black;");}//給第一批和最后一批加上對應選擇樣式var flag1=0;var flag2=0;$("a[name='pageTag']").each(function(){if(parseInt($(this).text())==1){flag1=1;}if(parseInt($(this).text())==pageCount){flag2=1;}});if(flag1==1){$("span[name='prePageTags']").attr("style","cursor:default");}else{$("span[name='prePageTags']").attr("style","cursor:pointer;color:black;");}if(flag2==1){$("span[name='nextPageTags']").attr("style","cursor:default");}else{$("span[name='nextPageTags']").attr("style","cursor:pointer;color:black;");}}}); })(jQuery);

上面是分頁標簽 page.js? 引入此文件。然后頁面只需要傳入json數據給它即可分頁，寫法如下

<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <meta http-equiv="X-UA-Compatible" content="IE=dege" /> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href='<c:url value="/assets/css/default/admin/admin.css"/>'/> <link rel="stylesheet" type="text/css" href='<c:url value="/assets/css/default/admin/experts.css"/>'/> <link href="<c:url value='/assets/css/default/admin/bootstrap-datetimepicker.min.css'/>" rel="stylesheet"media="screen"> <link rel="stylesheet" type="text/css" href='<c:url value="/assets/css/default/admin/bootstrap.min.css"/>'/> <script type="text/javascript" src="<c:url value='/assets/lib/bootstrap/bootstrap.js'/>" charset="UTF-8"></script> <script type="text/javascript" src="<c:url value='/assets/lib/lang/Date.js'/>" charset="UTF-8"></script> <script type="text/javascript" src="<c:url value='/assets/lib/datetimepicker/bootstrap-datetimepicker.js'/>" charset="UTF-8"></script> <script type="text/javascript" src="<c:url value='/assets/lib/datetimepicker/bootstrap-datetimepicker.zh-CN.js'/>" charset="UTF-8"></script> <script type="text/javascript" src="<c:url value='/assets/js/page.js'/>" charset="UTF-8"></script> <style> .icon2{background: url('<c:url value="/assets/images/default/infomation/icon2.png"/>');background-repeat: no-repeat; width:25px; height:25px; float:left;} .icon_b8{background-position: 0px -175px; color:#FFF; margin-left:5px;} .icon_b9{background-position: 0px -200px; color:#FFF; margin-left:5px;} .icon_b10{background-position: 0px -225px; color:#FFF; margin-left:5px; cursor:pointer;} </style><!--[if lt IE 9]><script src='<c:url value="/assets/lib/bootstrap/html5shiv.min.js"/>'></script><script src='<c:url value="/assets/lib/bootstrap/respond.min.js"/>'></script><![endif]--><div class="container2" style="width: 97%; margin-left: 9px; margin-right: 0px;"><div class="row"><div style="margin-left:10px;"><p class="right-firstContent"><span>系統管理</span>>><span>配置管理</span></p></div></div><div class="rw" style="margin-top: 30px;"><div class="col-md-10" style="position: relative;"><form id="commSysFormId"> <table><tr><td><strong>配置項鍵：</strong></td><td><input type="text" id="settingKey" name="settingKey" class="inputContent title form-control" /></td><td>&nbsp;</td><td>&nbsp;</td><td><strong>配置項描述：</strong></td><td><input type="text" id="description" name="description" class="inputContent title form-control" /></td><td>&nbsp;</td><td>&nbsp;</td></tr></table></form><div style="position:absolute;left: 600px;top:0px;"><button id="searchBtn" οnclick="javascript:void(0);" class="btn btn-primary selectWidth" >查 詢</button> <button id="resetBtn" οnclick="javascript:void(0);" class="btn btn-primary selectWidth" >重 置</button> </div></div></div><p>&nbsp;</p><p>&nbsp;</p><div class="row" style="width:98%;"><div style="width:98%;"><table class="table table-bordered table-hover consuitDate" id="theadCenter"><thead><tr class="theadCenter "><th >配置項鍵</th><th >配置項值</th><th >配置項描述</th><th >創建日期</th><th >修改日期</th><th >操作</th></tr></thead> <tbody align="center" id="commSysParamTbId"> </tbody> </table></div></div> <div class="page" name="pageComm" style="display:none;"></div> </div> <script type="text/javascript"> var $PageUtil=null; //加載數據 function loadData(){$PageUtil =$.PageUtil.init({_getDataUrl:"<c:url value='/commSysParam/getCommSysParamList.do'/>",//檢索條件form的Id_filedFormId:"commSysFormId",//顯示區域的Id_showId:"commSysParamTbId",//當前選中頁_nowSelectedPageTagNum:1, genericHTMLContent:function(data){if(parseInt(data.totalPage)<=0){$("#"+this._showId).html('<tr><td colspan="6" style="text-align: center;"><span style="font-size: 18px;color:orange;">目前沒有任何配置信息</span></td></tr>');return false;}var strhtml="";$(data.list).each(function(index,dat){ var createdDate= new Date(data.list[index].createdDate).format();var updatedDate= new Date(data.list[index].updatedDate).format();var value =data.list[index].settingValue;var description =data.list[index].description;if(value!=''&&value!=null){if(value.length>10){value = value.substring(0,10)+'...';}}else{value="";}if(description!=''&&description!=null){if(description.length>10){description = description.substring(0,10)+'...';}}var str="<tr>";str +='<td name="needUpdateKey" style="text-align:center;vertical-align:middle;">'+data.list[index].settingKey+'</td>';str +='<td name="needUpdateValue" title="'+value+'" style="text-align:center;vertical-align:middle;cursor:pointer;">'+value+'</td>';str +='<td title="'+data.list[index].description+'" style="text-align:center;vertical-align:middle;">'+description+'</td>';str +='<td style="text-align:center;vertical-align:middle;">'+createdDate+'</td>';str +='<td style="text-align:center;vertical-align:middle;">'+updatedDate+'</td>';str +='<td style="text-align:center;vertical-align:middle;width:180px;"><input type="button" name="btnUpdate" attrValue="'+value+'" value="修改" class="btn btn-primary selectWidth" />&nbsp;&nbsp;<input type="button" disabled="disabled" attrIdBussiness="'+data.list[index].idBussiness+'" name="btnSave" value="保存" class="btn btn-primary selectWidth" /></td>';str +='</tr>'strhtml+=str;});$("#"+this._showId).html(strhtml); //修改按鈕$("input[type='button'][name='btnUpdate']").click(function(){var thisValue =$(this).val();//目前按鈕的值 取消 和修改 2種 var attrValue = $(this).attr("attrValue");//獲得當前的值var attrDescription = $(this).attr("attrDescription");//獲得當前的描述if(thisValue=='取消'){if(attrValue.length>10){attrValue = attrValue.substring(0,10)+'...';}$(this).parent().siblings("td[name='needUpdateValue']").html(attrValue);$(this).parent().find("input[type='button'][name='btnSave']").attr("disabled","disabled");$(this).val("修改");}else if(thisValue=='修改'){$(this).parent().siblings("td[name='needUpdateValue']").html('<input type="text" name="settingValueTemp" value="'+attrValue+'" style="width:180px;" class="inputContent title form-control" />');$(this).parent().find("input[type='button'][name='btnSave']").attr("disabled",false);$(this).val("取消");}})//保存按鈕$("input[type='button'][name='btnSave']").click(function(){var value=$(this).parent().siblings("td[name='needUpdateValue']").find("input[type='text'][name='settingValueTemp']").val();value =$.trim(value);var idBussiness = $(this).attr("attrIdBussiness");//獲得當前的值var key=$(this).parent().siblings("td[name='needUpdateKey']").text();qikoo.dialog.confirm("確定要修改嗎?",function(){$.ajax({type : "post", async : false, url:"<c:url value='/commSysParam/updateCommSysParamByKey.do'/>", data : {"key":key,"value":value,"idBussiness":idBussiness},dataType:"json",success: function (result) {if(result.flag=='Y'){loadData();}else{alert(result.msg);}}});},function(){});})} });$PageUtil.loadData('1');return false; }$(function(){loadData();//查詢$("#searchBtn").click(function(){loadData();})//重置$("#resetBtn").click(function(){$("#settingKey").val('');$("#description").val('');}) })</script>

?

.res {float: rigth; }.zhihui {background: #CCCCCC }div table thead tr th {padding: 0px;margin: 0px; }#subject,#TFZX,#TDEP,#EGRP,#ZX {width: 95px;height: 35px; }.page {color: #666;cursor: pointer;padding: 10px 0;text-align: center;clear: both;overflow: hidden; }.page span {margin: 0 10px;line-height: 22px;display: inline-table; }.page span:hover {margin: 0 10px;color: #F60; }.page a {display: block;padding: 0 4px;text-align: center;height: 18px;line-height: 18px;margin-top: 3px;margin-right: 3px;color: #666;display: inline-table; }.page a:hover {background: #ccc;color: #FFF; }.page a.Selected {background: #1092CC;color: #FFF;display: inline-table; }.Selected {background: #1092CC;color: #FFF;display: inline-table; }.showDetailDiv {position: absolute;min-width: 100px;maxb-width: 120px;right: 0px;overflow: hidden;z-index: 9999;cursor: pointer;border: #DAF2FC solid 2px;background: #F1FAFE;padding: 0px 6px; }

　　

轉載于:https://www.cnblogs.com/hailei/p/4493977.html

總結

以上是生活随笔為你收集整理的项目组自己编写的js分页标签（百度分页）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。