之前使用分頁的時候都是直接調用插件,目前在作一個醫療商城的項目,前端使用的是bootstrap,雖然也有相關的分頁插件,奈何通過一陣討論最後仍是放棄了,決定本身寫一個,第一個分頁是採用的同步分頁,主要針對的是每張界面只有一個分頁頁面,每次點擊分頁的時候會刷新整個頁面,雖然比起異步分頁有一點缺點,可是封裝的總體比較好用,每張界面直接調方法引入便可,大大的節省了開發時間,提升開發效率,下面爲你們整理了下代碼。javascript
一、首先在每張jsp頁面定義屬性:前端
1)、每張JSP頁面有隻有一個form表單,用於提供後臺接口URL
<form action="toComplain" method="post" id="searchForm">
<div class="col-md-9 border search-box">
。。。。。。
</div>
</form>
2)、在table後面定義一個分頁按鈕組div。
<div class="log">
<div>
<div class="page pdr">
<div class="submitPage" >
</div>
</div>
</div>
</div>
三、在JSP頁面最後定義兩個分頁屬性:
<script type="text/javascript"> var curpage='${page.pageNo}'; var totalPage='${page.totalPage}'; </script>
二、頁面導入page.js,具體代碼以下:java
var curPageNum=1; $(function () { var curtotalpage = 4; curPageNum = totalPage; //前5頁//後5頁 //須要計算開始頁數 var startpage = 1; if (curpage == null) { curpage = 1; } if (curpage <= 3) { startpage = 1; } else { startpage = curpage - 3 + startpage; } var prepage = curpage - 1; var nextpage = parseInt(curpage) + 1; var endpage = startpage + curtotalpage; if (endpage > totalPage) { endpage = totalPage; } var front = curpage-3; var back = parseInt(curpage)+2; //上一頁 if(prepage>=1){ var prepage = '<input class="inp pages" type="button" value="上一頁" onclick="nextPageToForm('+prepage+')">'; $(prepage).appendTo(".submitPage"); } //前省略 if(front>0){ var qiandian = '<input class="inp nob" type="button" value="1" onclick="nextPageToForm(1)">'; qiandian += '<input class="inp dian mr" type="button" value="..."> '; $(".submitPage").append(qiandian); } //頁碼 for (var i = startpage; i <= endpage; i++) { var wtpage = null; if (i == curpage) { wtpage = '<input class="inp nob active" type="button" value="'+i+'" onclick="nextPageToForm('+i+')">'; } else { wtpage = '<input class="inp nob" type="button" value="'+i+'" onclick="nextPageToForm('+i+')">'; } $(wtpage).appendTo(".submitPage"); } //後省略 if(back<totalPage && totalPage>5){ var houdian = '<input class="inp dian mr" type="button" value="..."> '; houdian += '<input class="inp nob" type="button" value="'+totalPage+'" onclick="nextPageToForm('+totalPage+')">'; $(".submitPage").append(houdian); } //下一頁 if(nextpage<=totalPage ){ var nextcontent = '<input class="inp pages" type="button" value="下一頁" onclick="nextPageToForm('+nextpage+')">'; $(nextcontent).appendTo(".submitPage"); } //跳轉頁碼 var pageNum1 = ' 第 <input class="inp nob inner" type="text" onkeyup="getNum();" placeholder="'+totalPage+'" > 頁 '; $(".submitPage").append(pageNum1); var pageNum2 = '<a href="javascript:jump();" class="color6">跳轉</a>'; $(".submitPage").append(pageNum2); }) function getNum(){ var reg=/^[1-9]\d*$|^0$/; var value = $(".inner").val(); if(reg.test(value)==true){ curPageNum = value; }else{ $(".inner").val(""); } } function jump(){ nextPageToForm(curPageNum); }
三、點擊分頁時的方法:bootstrap
//上一頁/下一頁 首頁/尾頁 適用於帶form參數 function nextPageToForm(pageNo){ var formobj=document.forms[0]; if(formobj!=null){ $("<input id='pageNo' name='pageNo' type='hidden' value=\""+pageNo+"\">").appendTo(jQuery(formobj)); jQuery(formobj).submit(); } } //上一頁/下一頁 首頁/尾頁 適用於帶form名稱參數 function nextPageToFormName(pageNo,formName){ var formobj=document.forms[formName]; if(formobj!=null){ $("<input id='pageNo' name='pageNo' type='hidden' value=\""+pageNo+"\">").appendTo(jQuery(formobj)); jQuery(formobj).submit(); } }
四、展現效果:app
固然,前面的Pagination對象的封裝沒有爲你們提供,若是有須要的朋友能夠問我要,且文章開頭就說明了,這個分頁屬於同步分頁,下一篇文章會爲你們提供異步分頁的方式,有須要的能夠看看,不多寫博客,也是最近纔開始嘗試,因此有不足的地方,還請見諒,謝謝!異步