分页的第一种方式

优点：

1.能够立刻响应数据库中数据的变化，因为异步刷新，每隔三秒都从数据库中取出数据显示在页面上。

2.可以决定显示多少个页码，并且页码是根据当前页码的显示而自动改变的，相比于传统的页码更好看点。

缺点：

1.异步刷新，代码稍有些复杂。js拼凑字符串并显示为html。

<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script>

<style type="text/css">

#pagination-digg li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }

#pagination-digg a { border:solid 1px #9aafe5; margin-right:2px; }

#pagination-digg .previous-off,#pagination-digg .next-off { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }

#pagination-digg .next a,#pagination-digg .previous a { font-weight:bold; }

#pagination-digg .active { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; }

#pagination-digg a:link,#pagination-digg a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }

#pagination-digg a:hover { border:solid 1px #0e509e; }

#pagination-digg li a{ color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }

//next 属性表示显示可点状态，previous显示为不可点击状态

</style>

<script type="text/javascript">

var xmlHttp;

function GetXmlHttpObject()

{

xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

//更新某索引下（indexP）的全部页面数据

function updateItems(indexP){

GetXmlHttpObject();

if(xmlHttp){

var url="servlet/ajaxResponse";

if(indexP === undefined){

//若是未传参数，则更新数据时，从jsp页面的当前页面中获取。

indexP=document.getElementById("pageIndex").value;

}

else{

//若是传入了参数，则表明传入的那个参数才是现在或将来的页面索引，所以保存进jsp

document.getElementById("pageIndex").setAttribute("value", indexP);

}

var data="page="+indexP;

xmlHttp.open("post", url, true);

//设置请求头

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttp.onreadystatechange=deal;//设置处理返回数据的函数

xmlHttp.send(data);

}

}

//处理返回来的json数组，第一个对象是当前页与总页数，其它对象是本页面的具体数据

function deal(){

if(xmlHttp.readyState==4&&xmlHttp.status==200){

var text = xmlHttp.responseText;

text=eval("("+text+")");

document.getElementById("countItems").setAttribute("value", text.length);

//alert(text[0].thisPage);

var myPage=parseInt(text[0].thisPage);

var allPages=parseInt(text[0].allPages);

var page="<ul id=\"pagination-digg\">";

if(myPage==1){

page=page+"<li class=\"previous-off\">&laquo; 上一页</li>";

}

else{

page=page+"<li class=\"next\"><a οnclick=\"updateItems("+parseInt(myPage-1)+");return false;\">&laquo; 上一页</a></li>";

}

//若是总页面数少于五，则显示全部页码

if(allPages<=5){

for(var i=1;i<=allPages;++i){

if(i!=myPage){

page=page+"<li><a οnclick=\"updateItems("+i+");return false;\">"+i+"</a></li>";

}

else{

page=page+"<li class=\"active\">"+myPage+"</li>";

}

}

}

else{

//为了避免页码显示太多，因此当页面总数大于五时，最多只能显示5个页码，定位出起始页

var start=1;

if(myPage<=3){

start=1;

}

else if(allPages-myPage<=2){

start=allPages-4;

}

else{

start=myPage-2;

}

for(var j=start;j<start+5;++j){

if(j==myPage){

page=page+"<li class=\"active\">"+myPage+"</li>";

}

else{

page=page+"<li><a οnclick=\"updateItems("+j+");return false;\">"+j+"</a></li>";

}

}

}

if(myPage==allPages){

page=page+"<li class=\"previous-off\">下一页 &raquo;</li>";

}

else{

page=page+"<li class=\"next\"><a οnclick=\"updateItems("+parseInt(myPage+1)+");return false;\">下一页 &raquo;</a></li>";

}

page=page+"</ul>";

document.getElementById("turnPages").innerHTML=page;

var info="";

for(var i=2;i<=text.length;++i){

info=info+"用户名： "+text[i-1].username+"<br/>";

info=info+"<img width=\"100px\" height=\"100px\" alt=\"\" src=\"/AjaxAndHibernate/userPhoto/"+text[i-1].photo+"\"/>"+"<br/>";

info=info+"用户性别："+text[i-1].sex+"<br/>";

info=info+"用户地址："+text[i-1].address+"<br/>";

info=info+"<br/>";

}

document.getElementById("info").innerHTML=info;

}

}

//使用定时器，每隔3秒发一次

window.setInterval("updateItems()",3000);

function $(id){

return document.getElementById(id);

}

</script>

<script type="text/javascript">

window.οnlοad=function (){

GetXmlHttpObject();

if(xmlHttp){

var url="servlet/ajaxResponse";

var data="page=1";

xmlHttp.open("post", url, true);

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置请求头

xmlHttp.onreadystatechange=deal;//设置处理返回数据的函数

xmlHttp.send(data);

}

}

</script>

<c:set var="page" value="1"></c:set>

<c:set var="totalPages" value="${param.totalPages}"></c:set>

</head>

<body>

<input id="pageIndex" type="hidden" name="page" value="${page}"/>

<input id="countItems" type="hidden" name="countItems"/>

<a href="${pageContext.request.contextPath}/jsp/commit.jsp" target="_blank">点我提交数据</a>

<div id="info"></div>

<!--

<c:forEach var="id" begin="1" end="3" step="1">

用户名： <span id="username${id}"></span>

用户头像: <img width="100px" height="100px" id="photo${id}" alt="" src=""/>

用户性别：<span id="sex${id}"></span>

用户地址：<span id="address${id}"></span>

<br/><br/>

</c:forEach>

-->

<div id="turnPages"> </div>

<!--

<ul id="pagination-digg">

<li class="previous-off">&laquo; 上一页</li>

<li class="active">1</li>

<li><a οnclick="updateItems(2);return false;">2</a></li>

<li><a οnclick="updateItems(3);return false;">3</a></li>

<li class="next"><a href="?page=8">下一页 &raquo;</a></li>

</ul>

-->

</body>

Servlet中

String page=request.getParameter("page");

System.out.println(page);

AnnotationConfiguration acf=new AnnotationConfiguration().configure();

SessionFactory factory=acf.buildSessionFactory();

Session sess=factory.getCurrentSession();

sess.beginTransaction();

Query q=sess.createQuery("select u from User u");

//还未分页前，获取总条目数，并且计算出分页数量。

int items=q.list().size();

int allPages=(items%3)==0?(items/3):(items/3+1);

q.setMaxResults(3);

q.setFirstResult((Integer.parseInt(page)-1)*3);

List<User>users=q.list();

sess.getTransaction().commit();

factory.close();

StringBuilder sb=new StringBuilder();

//储存本页面的索引和总分页数。

sb.append("[");

sb.append("{thisPage:\'"+page+"\',allPages:\'"+allPages+"\'}");

//将每个对象信息放入json数组里。

for(int i=0;i<users.size();++i){

sb.append(",{username:\'"+users.get(i).getUsername()+"\',sex:\'"+users.get(i).getSex()+"\',photo:\'"+users.get(i).getPhoto()+"\',address:\'"+users.get(i).getAddress()+"\'}");

}

sb.append("]");

PrintWriter pw=response.getWriter();

pw.println(sb.toString());

//System.out.println("返回去的json： "+sb.toString());

pw.close();

return ;

学到：1.JS与JSP之间传递数据

//从jsp页面的当前页面中获取值。

indexP=document.getElementById("pageIndex").value;

//将值保存进jsp中。

document.getElementById("pageIndex").setAttribute("value", indexP);

jsp中： <input id="pageIndex" type="hidden" name="page" value="${page}"/>

代码优化后简洁版：

使用jquery+ajax，将发送ajax请求代码减少。

jsp页面修改：

<script type="text/javascript">

//发送一个ajax请求，去获取某个页面（索引为indexP）的数据

function updateItems(indexP){

var url="servlet/ajaxResponse";

if(indexP === undefined){

indexP=document.getElementById("pageIndex").value;

if(indexP==""){

indexP=1;

document.getElementById("pageIndex").setAttribute("value", indexP);

}

}

else{

document.getElementById("pageIndex").setAttribute("value", indexP);

}

$.post(url,{page:indexP},deal);

}

//处理返回来的json数组，第一个对象是当前页与总页数，其它对象是本页面的具体数据

function deal(data,textType){

var text = data;

text=eval("("+text+")");

document.getElementById("countItems").setAttribute("value", text.length);

//alert(text.length);

var myPage=parseInt(text[0].thisPage);

var allPages=parseInt(text[0].allPages);

var page="";

if(myPage!=1){

page=page+"<a οnclick=\"updateItems("+parseInt(myPage-1)+")\">上一页</a> ";

}

page=page+myPage+"/"+allPages+" ";

if(myPage!=allPages){

page=page+"<a οnclick=\"updateItems("+parseInt(myPage+1)+")\">下一页</a>";

}

document.getElementById("turnPages").innerHTML=page;

//alert(page);

var info="";

for(var i=2;i<=text.length;++i){

info=info+"用户名： "+text[i-1].username+"<br/>";

info=info+"<img width=\"100px\" height=\"100px\" alt=\"\" src=\"/AjaxAndHibernate/userPhoto/"+text[i-1].photo+"\"/>"+"<br/>";

info=info+"用户性别："+text[i-1].sex+"<br/>";

info=info+"用户地址："+text[i-1].address+"<br/>";

info=info+"<br/>";

}

document.getElementById("info").innerHTML=info;

}

//使用定时器，每隔3秒发一次

window.setInterval("updateItems()",3000);

</script>

<script type="text/javascript">

window.οnlοad=function (){

updateItems(${page});

}

</script>

<c:set var="page" value="${param.page}"></c:set>

<c:set var="totalPages" value="${param.totalPages}"></c:set>

</head>

<body>

<input id="pageIndex" type="hidden" name="page" value="${page}" />

<input id="countItems" type="hidden" name="countItems" />

<a href="${pageContext.request.contextPath}/jsp/commit.jsp"

target="_blank">点我提交数据</a>

<div id="info"></div>

<div id="turnPages"></div>

</body>