分页的实现
需求就是实现以下的功能：
包括正确显示第几页，共几页，记录条数，以及每页可选显示几条。
这个简单的功能需要注意的就是当每页显示条数改变时，第几页能不能正确显示。之前遇到的bug就是 选每页显示10条，然后选到末页，再选择每页显示20条，这是第几页显示
就不正确了，这个bug出现的原因是当到末尾是对记录数计算不正确导致的。因此算法判断需要准确。
以下开始展示代码：
部分前端代码：
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head> <title>订单列表</title> <meta name="decorator" content="default"/> <script type="text/javascript"> //改变每页显示的个数 function changePageSize(){ var pageSize = document.getElementById( "combox").value;//得到列表改变后的值 document.getElementById("pageSize").value=pageSize; document.getElementById("searchForm").submit(); } </script> </head> <body> <form id="searchForm" class="breadcrumb form-search" action="orderList" method="post"> <input type="hidden" id="currentPage" name="currentPage" value="${currentPage }"> <input type="hidden" id="needPage" name="needPage" value="${currentPage }"> <input type="hidden" id="totalPage" value="${paging.totalPage }"> <input type="hidden" name="totalCount" id="totalCount" value="${paging.totalCount}"/> <input type="hidden" name="pageSize" id="pageSize" value="${paging.pageSize}"/> <input type="hidden" name="beforePageSize" id="beforePageSize" value="${paging.pageSize}"/> ......中间省略 </form> <div class="pagination"> <tr> <td colspan="11"> <span style="float:right"> <a href="javascript:;" name="headerPage">首页</a> <a href="javascript:;" name="upPage">上一页</a> <a href="javascript:;" name="nextPage">下一页</a> <a href="javascript:;" name="endPage">末页</a> 每页<select id="combox" name="pageRow" onchange="changePageSize()"> <option value="10" ${paging.pageSize == 10 ? 'selected="selected"':'' }>10</option> <option value="20" ${paging.pageSize == 20 ? 'selected="selected"':'' }>20</option> <option value="50" ${paging.pageSize == 50 ? 'selected="selected"':'' }>50</option> <option value="100" ${paging.pageSize == 100 ? 'selected="selected"':'' }>100</option> </select>条跳到 <input id="jumpPage" class="textbox" style="width:30px" type="text" /> 页 <a href="javascript:;" name="jumpToPage">跳转</a> </span> <span style="float:left"> 第<em><c:out value="${currentPage}" /></em>页， 共<em><c:out value="${paging.totalPage}" /></em>页， 共<em><c:out value="${paging.totalCount}" /></em>条记录 </span> </td> </tr> </div> </body> </html>
分页bean:
import java.io.Serializable; public class Paging implements Serializable{ /** * @since JDK 1.7 */ private static final long serialVersionUID = 1L; protected int pageNo = 1; protected int pageSize = 10; protected int startIndex; protected int endIndex; protected long totalCount; protected long totalPage; public <T extends Paging> Paging(T obj) { this.pageNo = obj.getPageNo(); this.pageSize = obj.getPageSize(); cal(); } public Paging() { } public long getTotalCount() { return totalCount; } public void setTotalCount(long totalCount) { this.totalCount = totalCount; this.calTotalPage();//计算总页码 } public long getTotalPage() { return totalPage; } public int getPageNo() { return pageNo; } public void setPageNo(int pageNo) { this.pageNo = pageNo; cal(); } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; cal(); } public int getStartIndex() { return startIndex; } public int getEndIndex() { return endIndex; } /** * 计算开始位置和结束位置 */ private void cal() { this.startIndex = (pageNo - 1) * pageSize; this.endIndex = pageNo * pageSize; } /** * 计算总页码*/ private void calTotalPage() { this.totalPage = (this.totalCount - 1) / this.pageSize + 1; } }
由于多个页面需要，因此尽量将分页方法抽取成工具类：
import com.entity.Paging; public class PageSize { public String setPageSize(Paging paging, int beforePageNo, int beforePageSize, int pageSize, String needPage){ int newPageNo=0; Boolean flag=false; //判断pageSize是否改变的标志位 //判断pageSize是否改变 改变了就需要重新计算页码 if(pageSize!=paging.getPageSize()){ flag=true; paging.setPageSize(pageSize); long currentTotalCount=beforePageNo*beforePageSize;//当前记录总条数 if(currentTotalCount>=paging.getTotalCount()){ //当前总条数不能超过总数 currentTotalCount=paging.getTotalCount(); } newPageNo=(int)((currentTotalCount - 1) / pageSize + 1);//计算pageSize改变后当前页码应该显示是第几页 } //如果改变 取新页码 if(flag==true){ flag=false; if(newPageNo!=0){ needPage=String.valueOf(newPageNo); } } return needPage; } }
控制层使用分页：（需要获取相关参数）
@Controller @RequestMapping("/${adminPath}/order") public class ICarOrderController extends PLBaseController { private static Paging paging=new Paging(); //分页静态变量 @RequestMapping(value = "orderList") /* @ResponseBody*/ public String getOrderList(HttpServletRequest request, HttpServletResponse response, Model model) throws Exception { //分页 PageSize page=new PageSize();//创建设置pageSize的工具类对像 String needPage=null; //pageSize改变之后应该显示的当前页码 if(request.getParameter("pageSize")!=null && request.getParameter("pageSize")!=""){ int pageSize = Integer.parseInt(request.getParameter("pageSize")); //获取正在改变的pageSize int beforePageSize = Integer.parseInt(request.getParameter("beforePageSize"));//获取改变之前的pageSize int beforePageNo = Integer.parseInt(request.getParameter("currentPage")); //获取pageSize改变之前当前页码数 needPage = request.getParameter("needPage"); needPage=page.setPageSize(paging,beforePageNo,beforePageSize,pageSize,needPage); } if (needPage == null || needPage.equals("")) {//首次访问 needPage = "1"; } paging.setPageNo(Integer.parseInt(needPage)); //设置当前页码 return "order.jsp"; } }
这样就完成了简单的分页。
另外，说下 可以使用下面：
<div style="overflow-x: auto; overflow-y: auto; width:100%;">
<table >
.......
</table>
</div>
这种形式可以给表格加水平的滚动条，需要注意的是div的width的大小需要小鱼table的。
还有一点，要想让表格每一行只显示一行而不换行可以使用下面的样式：
tr{ width: 150px; //设置需要固定的宽度 white-space: nowrap; //不换行 text-overflow: ellipsis; //超出部分用....代替 overflow: hidden; //超出隐藏 }
谢谢...
