学习spirngmvc 和 使用 pager-taglib的一点小例子(包含 跳转页 及 每页显示数量控制)

最近在学习使用 springmvc， 同时由于用到了分页，所以就使用了一下page-taglib，用的时候，没懂得怎么配置之前还是很纠结的，不过最后还是解决了（直接 或者 间接）的，特别是大家用的时候基本上都没有自己配置跳转到第几页和每页显示数量，上网查了一下，貌似这个问题大家问的挺多，但是真正的例子还是很少，下面就简单的说一下使用过程。

 

1.先跟大家讲一下传统分页和使用pager-taglib的不同，下面会有具体的例子，一会大家可以参考看一下。

（1）传统的分页其实就是在 所显示的内容后面（大部分就是在table标签后再加一行tr）加入一些自己写的分页所需要传递的参数，然后当点击这些连接时候，将整个页面所在的表单（form）提交到配置好的后台（action="myUrl.do"），从后台取出分页参数以及查询条件参数，到dao中获取下一次需要的数据，然后传递到页面，基本就完成了一次分页查询和分页展示。

（2）pager-taglib的方式则不一样，这个是基于 传递url+参数的方式去获取数据的

例如：http://localhost:8080/myApp/myUrl.do?pager.offset=10&pageNo=1&userName=admin

所以当使用pager-taglib最重要的就是配置好 需要获取数据的url 以及将对应的参数传到后台 就可以了。网上大部分的例子其实都是官方给出的例子，大家用的时候大部分都对其中 pager.offset 和自己无法传递参数到后台 很蛋疼，下面会介绍如何使用自己的参数和一些配置的例子给大家作参考（pager.offset 其实不需要去管他，一般来讲，这个偏移量对用户和开发者而言没有什么实际意义，根本不需要去获取）

 

 

2.大家先看一下以前的分页大概的模型，就是设置一个表单，里面利用一个table，使用jstl的c:forEach  或者 strus的一些循环标签将分页内容显示出来，紧接着就自己构造一个分页参数的链接，以供分页时候提交表单数据和分页参数使用。

<script type="text/javascript">
function abc(a) {
 var pageNo = document.getElementsByName("pageNo")[0];
 pageNo.value = a;

 form1.submit();
}
</script>

 

<form name="form1" action="<%=request.getContextPath()%>/showUsers.do" method="post">  

<table border="1">
  <tr>
   <th>用户编号</th>
   <th>用户名称</th>
   <th>用户密码</th>
  </tr>
  <c:forEach var="userProfile" items="${pi.records}">
  <tr>
   <td><c:out value="${userProfile.userNo}"/></td>
   <td><c:out value="${userProfile.userName}"/></td>
   <td><c:out value="${userProfile.userPassword}"/></td>
  </tr>
  </c:forEach>
  
  <tr>
      <td colspan="4">
       <input type="button" name="bnFirst" value="首页" onclick="abc(1)"/>
       <input type="button" name="bnPre" value="前一页" onclick="abc(${pi.pageNo - 1})"/>
       <input type="button" name="bnNext" value="后一页" onclick="abc(${pi.pageNo + 1})"/>
       <input type="button" name="bnLast" value="末页" onclick="abc(${pi.totalPageCount })"/>
       <input type="text" size="4" disabled="disabled" name="currentPage" value="${pi.pageNo }"/>
       <input type="hidden" size="4" name="pageNo" value="${pi.pageNo }"/>
       <input type="text" size="4" name="pageSize" value="${pi.pageSize }"/>
       每页显示 ${pi.pageSize} 条 / 共 ${pi.totalPageCount } 页
      </td>
     </tr>

</table> 

 

 

3.jsp中的使用pager-taglib

首先要引入pager-taglib的jar包和taglib（本例中还同时使用了jstl），以下2行大家加上就ok了

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>

 

大家请看一下使用的小例子，如下

<pg:pager url="showUsers.do" items="${pi.totalCount }" maxPageItems="${pi.pageSize }" export="currentPageNumber=pageNumber"> 
     <pg:param name="pageSize" value="${pi.pageSize }"/>
     <pg:first> 
         <a href="${pageUrl}&pageNo=${pageNumber }">首页</a> 
     </pg:first> 
     <pg:prev> 
         <a href="${pageUrl }&pageNo=${pageNumber }">上一页</a> 
     </pg:prev> 
     <pg:pages> 
         <c:choose> 
             <c:when test="${pageNumber eq pi.pageNo}"> 
                 <font color="red">${pageNumber }</font> 
             </c:when> 
             <c:otherwise> 
                 <a href="${pageUrl }&pageNo=${pageNumber }">${pageNumber }</a> 
             </c:otherwise> 
         </c:choose> 
     </pg:pages> 
     <pg:next> 
         <a href="${pageUrl }&pageNo=${pageNumber }">下一页</a> 
     </pg:next> 
     <pg:last> 
         <a href="${pageUrl }&pageNo=${pageNumber }">尾页</a> 
     </pg:last>
     <pg:page>
      <input id="pNo" size="2" type="text" />
      <input type="button" value="跳转到" onclick="jump('${pageUrl }')" />
     </pg:page>
 </pg:pager>
 [每页显示<input type="text" size="2" name="pageSize" value="${pi.pageSize }" onkeydown="kdown(this)"/>条数据，请输入数字后按回车]
 <select name="" onchange="selectPagesize(this)">
  <c:forEach var="i" begin="1" end="${pi.totalPageCount }" step="1">
  <option value="${i}" <c:if test="${pi.pageNo eq i }">selected</c:if> ><c:out value="${i}" /></option>
  </c:forEach>
 </select>
<!-- </form> -->
<script type="text/javascript">
 function selectPagesize(field){
  var uri = "<%=request.getContextPath()%>" + "/showUsers.do?pageNo=" + field.value + "&pageSize=${pi.pageSize }";
  document.location.href = uri;
 }
 
 function jump(uri) {
  var pNo = document.getElementById("pNo").value;
  document.location.href = uri + "&pageNo=" + pNo;
 }
 
 function kdown(pSize) {
  if (event.keyCode == 13) {
   var uri = "<%=request.getContextPath()%>" + "/showUsers.do?pageNo=1&pageSize=" + pSize.value;
   document.location.href = uri;
  }
 }
</script>

 

其中的红色字体标注的部分是相对比较重要的一部分，下面给大家重点说明一下。

（1）url="showUsers.do" 意思是当你点击 下一页 或者 首页 之类的标签时候，你的页面会去哪个url获取数据（pager-taglib使用的是传递url+参数的方式去获取数据的 例如http://localhost:8080/myApp/myUrl.do?pager.offset=10&pageNo=1&userName=admin这种格式去获取数据），所以这个你就配置成原本分页中的 form的 action地址就可以了。

 

（2）items="${pi.totalCount }"  （items:总记录数，pager标签正是根据这个值来计算分页参数的），也就是说这个其实就是pager分页的基础，所以这个值是必须填的，取值其实就是你从数据库中分页时候获取的总记录数。

 

（3）maxPageItems="${pi.pageSize }" （maxPageItems:每页显示的行数，默认为10 ），也就是说当你想要控制每页显示数量的时候，一定要把这个参数配置好，并且需要传递到后台，以便当你跳转到其他页时还能够按照自己设定的每页显示数量来显示。

 

（4）<pg:param name="pageSize" value="${pi.pageSize }"/> 传递参数到后台使用，其实前面讲过了，pager-taglib使用的是传递url+参数的方式去获取数据的，与我们原本的form 提交表单的方式不同，所以当你有任何自己需要传递到后台的参数时，都是使用这一行来传递的，其中需要注意的一点是 这行代码必须 是 <pg:pager >中的第一个子串，也就是要紧挨着  <pg:pager >标签， 否则数据会无法传递到后台。

 

（5）<a href="${pageUrl}&pageNo=${pageNumber }">首页</a> 网上的大部分例子这个地方其实应该写成

<a href="${pageUrl }">，这里之所以要多加一个 &pageNo=${pageNumber }则是要解决大多数人很蛋疼的当前页的页码问题，这样后台就能拿到pageNo这个当前页码了，然后当然可以该干嘛干嘛了：）

 

（6）<c:when test="${pageNumber eq pi.pageNo}">  这个按照网上的例子应该是

<c:when test="${pageNumber eq currentPageNumber }"> 之所以改成 pi.pageNo 是为了当增加 跳转到第几页功能时候能同步的将分页的页码对应到当前页，如果按照原有的代码的话，当你使用跳转到例如第2页时候，这个表达式是不会起作用的，所有的页码都会是可以点击的链接，这个大家拿附件中的代码修改试验一下就能明白（注意看分页的的页码全是链接）

 

（7）<pg:page>
      <input id="pNo" size="2" type="text" />
      <input type="button" value="跳转到" onclick="jump('${pageUrl }')" />
     </pg:page>
这个就是后来自己加的 跳转到第几页的一个小功能，因为这个功能很多时候还是有用的，其实就是拼接一个url串就ok了，大家稍微看看应该没啥问题。

 

4.spirngmvc的后台获取数据的一些小提示

 

@RequestMapping(value = "/showUsers.do")
 public ModelAndView showAllUsers(PageInfo<UserProfile> pi) {
  ModelAndView mav = new ModelAndView("showUsers");
  pi = userService.getAllUsers(pi);
  mav.addObject("pi", pi);  
  return mav;
 }

这个就是controller类，这边只需要接收 PageInfo这个参数就ok了，因为springmvc 会根据名称自动的为对象的属性赋值，例如我们在pager中使用的 pageNo pageSize 这些参数都被自动的赋值给 PageInfo（pi） 这个对象了，后台只需要定义这个对象为参数，就可以去取，大多数情况如果取不到数据，请大家去看一下pager中的 各个参数名称是否正确就可以了。

 

5.这个例子中我没有给出 关于分页条件的传递 例子，其实原理是一样的，大家只需要多定义一些<pg:param >参数就可以了，例如：

后台再设置一个对象到返回参数中

MyBean mb = new MyBean();

mb.setUserName("admin");

mb.setUserEmail("[e-mail]");

mav.addObject("myBean", mb);  

 

加上以下这些就可以将这些参数贯穿前后台，需要注意的则是中文问题，因为中文也是跟在 url后面传递的，一般来讲都会有乱码问题，这个大家上网上搜一下关于 url带中文参数乱码怎么解决就ok，网上有很多例子

<pg:param name="userName" value="${myBean.userName}"/>

<pg:param name="userEmail" value="${myBean.userEmail}"/>

6.项目的源码结构

因为我用的时eclipse，还用了maven管理，所以我的文件目录结构跟大家常用的有一点点不同，而且我也不是很会用maven，不知道怎么把源码直接给大家发出来，只能在这里描述以下我的目录结构

（1）com.rar包请放到 src文件夹中

（2）请新建一个Source Folder，叫做conr 跟 src平级就ok，将conf中的3个文件拷到这个文件夹中，其中的 dbConfig.properties文件就是数据库配置，如果大家自己测试时候，修改 数据库实例名和用户名密码 就在这里修改就ok

（3）WEB-INF目录就放到对应的文件夹下，需要注意一个问题，我用的 eclipse在项目属性上有 Deployment Assembly这个选项，所以我把 WEB-INF/page 的路径发布到 根目录下，所以如果当使用网址

http://localhost:8080/mytestspringmvc3/showUsers.do 无法访问时候，可以尝试将page里头的jsp copy到 webContent目录下，同时修改一下/WEB-INF/spring-mvc目录下得dispatcher-servlet.xml文件，将其中的

<property name="prefix" value="/WEB-INF/page/" />修改成

<property name="prefix" value="/" />

哎，使用maven和eclipse比较闹心，大家见谅，有些小配置问题大家可以自己调整一下。

 

7.数据库配置

数据库实例名、用户名、密码均为 mytest

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/mytest?characterEncoding=utf-8
jdbc.user=mytest
jdbc.password=mytest

建表语句及我的测试数据都再mytest.rar包中

8.附件war包使用方法

附件中给出的时war包，大家可以根据 WEB-INF/lib里头的图片中内容将 所有的jar包给配好，放到tomcat下（我使用的是tomcat7），连接好数据库，访问地址是：http://localhost:8080/mytestspringmvc3/showUsers.do ，大家试的时候可以多注意留心以下地址栏，就会明白pager-taglib的方式。

 

9.总结

pager-taglib大部分问题都是传值问题，我的例子是我自己测试出来的思路，希望能给大家一些小小的帮助，主要还是需要自己去测试一下。

评论

1 楼 yssheep 2016-11-24  

收益良多，解决了一个困扰几天的问题