分页是一个公用控件,在所有列表页面都要用到,前台封装后台封装两部分,以mysql为列。
1、前台分页控件
前台公用翻页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=""/>
2、后台分页控件
在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;
}
}
3、分页应用
在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" οnclick="insertTest()" value="增加" />
<input type="button" name="btninsert" οnclick="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 点击列表页面按钮,进入列表页面,有翻页和查询功能