以前使用分页的时候都是直接调用插件,目前在做一个医疗商城的项目,前端使用的是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="上一页" οnclick="nextPageToForm('+prepage+')">';
$(prepage).appendTo(".submitPage");
}
//前省略
if(front>0){
var qiandian = '<input class="inp nob" type="button" value="1" οnclick="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+'" οnclick="nextPageToForm('+i+')">';
} else {
wtpage = '<input class="inp nob" type="button" value="'+i+'" οnclick="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+'" οnclick="nextPageToForm('+totalPage+')">';
$(".submitPage").append(houdian);
}
//下一页
if(nextpage<=totalPage ){
var nextcontent = '<input class="inp pages" type="button" value="下一页" οnclick="nextPageToForm('+nextpage+')">';
$(nextcontent).appendTo(".submitPage");
}
//跳转页码
var pageNum1 = ' 第 <input class="inp nob inner" type="text" οnkeyup="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对象的封装没有为大家提供,如果有需要的朋友可以问我要,且文章开头就说明了,这个分页属于同步分页,下一篇文章会为大家提供异步分页的方式,有需要的可以看看,很少写博客,也是最近才开始尝试,所以有不足的地方,还请见谅,谢谢!