項目開發之分頁---同步分頁

  之前使用分頁的時候都是直接調用插件,目前在作一個醫療商城的項目,前端使用的是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對象的封裝沒有爲你們提供,若是有須要的朋友能夠問我要,且文章開頭就說明了,這個分頁屬於同步分頁,下一篇文章會爲你們提供異步分頁的方式,有須要的能夠看看,不多寫博客,也是最近纔開始嘗試,因此有不足的地方,還請見諒,謝謝!異步

相關文章
相關標籤/搜索