项目开发之分页---同步分页

　　以前使用分页的时候都是直接调用插件，目前在做一个医疗商城的项目，前端使用的是bootstrap，虽然也有相关的分页插件，奈何经过一阵讨论最后还是放弃了，决定自己写一个，第一个分页是采用的同步分页，主要针对的是每张界面只有一个分页页面，每次点击分页的时候会刷新整个页面，虽然比起异步分页有一点缺点，但是封装的整体比较好用，每张界面直接调方法引入即可，大大的节省了开发时间，提高开发效率，下面为大家整理了下代码。

1、首先在每张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>

3、在JSP页面最后定义两个分页属性：
<script type="text/javascript">
    var curpage='${page.pageNo}';
    var totalPage='${page.totalPage}';
</script>

2、页面导入page.js，具体代码如下：

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);
}

　　3、点击分页时的方法：

//上一页/下一页 首页/尾页 适用于带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();
	}

}

　　4、展示效果：

 当然，前面的Pagination对象的封装没有为大家提供，如果有需要的朋友可以问我要，且文章开头就说明了，这个分页属于同步分页，下一篇文章会为大家提供异步分页的方式，有需要的可以看看，很少写博客，也是最近才开始尝试，所以有不足的地方，还请见谅，谢谢！