分页是一个公用控件,在所有列表页面都要用到,前台封装后台封装两部分,以mysql为列。
前台公用翻页javascript,在WebRoot下创建文件夹js并建立page.js
function gotoPage(pageIndex) { var myForm = document.getElementById("mainForm"); if (myForm["pageIndex"]) myForm["pageIndex"].value = pageIndex; myForm.submit(); } function gotoPageByIndex(pageTotal) { var myForm = document.getElementById("mainForm"); var gotoIndex = document.getElementById("inputPageIndex").value; if (isNaN(gotoIndex)) { alert("请输入正确的页码!"); return; } if(gotoIndex>pageTotal){ alert("总共"+pageTotal+"页,输入的页数大于总页数,请重新输入!"); return; } if (myForm["pageIndex"]) { myForm["pageIndex"].value = gotoIndex; } myForm.submit(); }
前台公用翻页jsp,在WebRoot下创建page.jsp
<jsp:directive.page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"/> <jsp:directive.taglib prefix="s" uri="/struts-tags"/> 当前第 <s:property value="page.pageIndex"/> 页 共有 <s:property value="page.rowTotal"/> 结果 每页 <s:property value="page.pageSize"/> 条 <s:if test="page.pageIndex > 1"> <a href="javascript:gotoPage(1);">首页</a> </s:if> <s:else> 首页 </s:else> <s:if test="page.pageIndex > 1"> <a href="javascript:gotoPage(<s:property value ="page.pageIndex-1"/>);">上页</a> </s:if> <s:else> 上页 </s:else> <s:if test="page.pageIndex < page.pageTotal"> <a href="javascript:gotoPage(<s:property value = "page.pageIndex+1"/>);">下页</a> </s:if> <s:else> 下页 </s:else> <s:if test="page.pageIndex < page.pageTotal"> <a href="javascript:gotoPage(<s:property value = "page.pageTotal"/>);">尾页</a> </s:if> <s:else> 尾页 </s:else> 跳转到 <input name="inputPageIndex" id="inputPageIndex" type="text" size="3" value="<s:property value="page.pageIndex"/>"/> 页 <input name="Submit" type="submit" onClick="javascript:gotoPageByIndex(<s:property value = "page.pageTotal"/>)" value=""/>
在bean文件夹下,创建翻页公用类Page.java
package com.zhou.bean; /** * @author zhouzhenlong * @date Sept 18, 201212:55:36 PM * @description 翻页类 * @version V1.0 */ public class Page { // 第几页 private int pageIndex; // 每页大小 private int pageSize; // 总数 private int rowTotal; // 总共多少页 private int pageTotal; public Page(int pageIndex, int pageSize, int rowTotal) { this.pageIndex = pageIndex; this.pageSize = pageSize; this.rowTotal = rowTotal; } public int getRowTotal() { return rowTotal; } public void setRowTotal(int rowTotal) { this.rowTotal = rowTotal; } public int getPageIndex() { return pageIndex; } public void setPageIndex(int pageIndex) { this.pageIndex = pageIndex; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getPageTotal() { int pageTotal = 0; if (rowTotal % pageSize == 0) { pageTotal = this.rowTotal / this.pageSize; } else { pageTotal = rowTotal / pageSize + 1; } return pageTotal; } public void setPageTotal(int pageTotal) { this.pageTotal = pageTotal; } }
在bean文件夹下 创建翻页Page和Object封装类SearchPageUtil.java
package com.zhou.bean; /** * @author zhouzhenlong * @date Sept 18, 201212:55:36 PM * @description * @version V1.0 */ public class SearchPageUtil { // 查询对象 private Object object; // 排序字段 private String[] orderBys; // 开始行 private int startRow; // 终止行 private int pageSize; // 条件字符串 private String filter; // 排序字符串 private String orderBy; // 分页类 private Page page; public Object getObject() { return object; } public void setObject(Object object) { this.object = object; } public int getStartRow() { return startRow; } public void setStartRow(int startRow) { this.startRow = startRow; } public String getFilter() { return filter; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public void setFilter(String filter) { this.filter = filter; } public String[] getOrderBys() { return orderBys; } public void setOrderBys(String[] orderBys) { this.orderBys = orderBys; } public String getOrderBy() { return orderBy; } public void setOrderBy(String orderBy) { this.orderBy = orderBy; } public Page getPage() { return page; } public void setPage(Page page) { this.startRow = (page.getPageIndex() - 1) * page.getPageSize(); this.pageSize = page.getPageSize(); this.page = page; } }
在test.jsp增加列表页面按钮并增加按钮事件
<%@ page contentType="text/html; charset=UTF-8"%> <html> <head> <title></title> <script type="text/javascript" src="./jquery/jquery-1.9.1.js"></script> <script type="text/javascript"> function insertTest() { var myform = document.forms[0]; myform.action = "Test!save.action"; myform.method = "post"; myform.submit(); } function listTest() { var myform = document.forms[0]; myform.action = "Test!list.action"; myform.method = "post"; myform.submit(); } </script> </head> <body> <h1>样例</h1> <hr> <form name="myform"> id: <input type="text" name="test.id"> <br> name: <input type="text" name="test.name"> <br> <input type="button" name="btninsert" onclick="insertTest()" value="增加" /> <input type="button" name="btninsert" onclick="listTest()" value="列表页面" /> </form> </body> </html>
在WebRoot下创建test-list.jsp
<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <html> <head> <title></title> <script type="text/javascript" src="./jquery/jquery-1.9.1.js"></script> <script type="text/javascript" src="./js/page.js"></script> <script type="text/javascript"> $(function() { $("#searchButton").click(function(){ var myForm = document.getElementById("mainForm"); if (myForm["pageIndex"]) myForm["pageIndex"].value = 1; if (myForm["test.id"]) myForm["test.id"].value = $("#id").val(); if (myForm["test.name"]) myForm["test.name"].value = $("#name").val(); $("#mainForm").submit(); }) }); </script> </head> <body> <table width="100%" border=1 cellPadding=0 cellSpacing=0> <tr> <td colspan="2">id :<input type="text" id="id" value="<s:property value="test.id"/>"/>name:<input type="text" id="name" value="<s:property value="test.name"/>"/><button id="searchButton">查询</button></td> </tr> <tr> <td>ID</td><td>NAME</td> </tr> <s:iterator value="tests" status="index"> <tr> <td><s:property value="id"/></td><td><s:property value="name"/></td> </tr> </s:iterator> <tr> <td colspan="2"><jsp:include page="./page.jsp"></jsp:include></td> </tr> </table> <form action="Test!list.action" id="mainForm" method="post"> <input type="hidden" name="test.id" value="<s:property value="test.id"/>" /> <input type="hidden" name="test.name" value="<s:property value="test.name"/>" /> <input type="hidden" name="pageSize" value="<s:property value="page.pageSize"/>" /> <input type="hidden" name="pageIndex" value="<s:property value="page.pageIndex"/>" /> </form> </body> </html>
在TestService.java增加接口
/** * 根据条件获取总数 * * @param test * @return */ public int getCount(Test test); /** * 根据条件获取 * * @param test * @return */ public List getList(Test test,Page page);
在TestServiceImpl.java增加实现类
public List getList(Test test, Page page) { SearchPageUtil searchPageUtil = new SearchPageUtil(); String a[] = { "name desc", "id asc" }; searchPageUtil.setOrderBys(a); searchPageUtil.setPage(page); searchPageUtil.setObject(test); final List list = testDao.getList(searchPageUtil); return list; } @Override public int getCount(Test test) { return testDao.getCount(test); }
在TestDao.java增加接口
/** * 根据条件获取 * * @param test * @return */ public List<Test> getList(SearchPageUtil searchPageUtil); /** * 根据条件获取总数 * * @param test * @return */ public int getCount(Test test);
在配置文件test-mapper.xml增加
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.zhou.dao.TestDao"> <resultMap type="com.zhou.bean.Test" id="testResultMap"> <result property="id" column="id" /> <result property="name" column="name" /> </resultMap> <insert id="insertTest" parameterType="com.zhou.bean.Test"> insert into t_test(id,name) values (#{id},#{name}) </insert> <select id="getCount" parameterType="com.zhou.bean.Test" resultType="int"> select count(1) from t_test <where> <if test="id!=null"> and id like CONCAT('%',#{id},'%') </if> <if test="name != null"> and name like CONCAT('%',#{name},'%') </if> </where> </select> <select id="getList" parameterType="com.zhou.bean.SearchPageUtil" resultType="list" resultMap="testResultMap"> select * from t_test <where> <if test="object !=null and object.id != null"> and id like CONCAT('%',#{object.id},'%') </if> <if test="object !=null and object.name != null"> and name like CONCAT('%',#{object.name},'%') </if> </where> <if test="orderBys!=null"> order by <foreach collection="orderBys" item="item" open="" close="" separator=","> #{item} </foreach> </if> limit #{startRow},#{pageSize} </select> </mapper>
在配置文件struts-test.xml增加配置
<package name="MyActions" extends="struts-default"> <action name="Test!*" class="testAction" method="{1}"> <result name="success">/index.jsp</result> <result name="list">/test-list.jsp</result> </action> </package>
部署到tomcat下访问http://localhost:8080/Test/test.jsp 点击列表页面按钮,进入列表页面,有翻页和查询功能