实现分页显示
创建显示数据showFunc1Page.jsp(或复制已有显示数据界面)
<%--
Created by IntelliJ IDEA.
User: lenovo
Date: 2018/10/13
Time: 14:02
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>showStu</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script>
function ajaxdel(fld1) {
if (confirm("确定要删除[fld1=" + fld1 + "]的数据吗?")) {
$.ajax(
{
url: "func1.action?op=ajaxdel&fld1=" + fld1,
success: function (data) {
if (data == "yes") {
$("#fld" + fld1).remove();
}
}
}
);
}
return false;
}
function getPage(pageNum) {
pageNum = pageNum == "undefined" ? 1 : pageNum;
$.ajax(
{
type: "post",
url: "func1.action?op=ajaxpage&pageNum=" + pageNum,
dataType: "json",
success: function (data) {
var str = "";
for (var i = 0; i < data.lstFunc1.length; i++) {
var x = data.lstFunc1[i];
str = str + "<tr id='fld" + x.fld1 + "'><td>" + x.fld1 + "</td><td>" + x.fld2 + "</td><td>" + x.fld3 + "</td>";
str = str + "<td> <a href='#' οnclick='return ajaxdel(" + x.fld1 + ")'> del </a> ";
str = str + "<a href='modifyFunc1.jsp?oldfld1=" + x.fld1 + "&fld1=" + x.fld1 + "&fld2=" + x.fld2 + "' > mod</a></td></tr>";
}
$("#func1").html(str);
$("#page").html(data.page);
}
}
);
}
</script>
<style>
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>fld1</td>
<td>fld2</td>
<td>fld3</td>
<td> op</td>
</tr>
</thead>
<tbody id="func1">
</tbody>
</table>
<div id="page"></div>
<a href="addFunc1.jsp">addFunc1</a>
</body>
<script>
getPage(1);
</script>
</html>
实现查询action
private void ajaxpage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Func1 func1 = new Func1();
PrintWriter out = resp.getWriter();
MyUtil.setParams(req, func1);
int pageNum = 1;
try {
pageNum = Integer.parseInt(req.getParameter("pageNum"));
} catch (Exception e) {
log.error(e.getMessage());
}
int pageSize = 1;
try {
pageSize = (int) req.getServletContext().getAttribute("pageSize");
} catch (Exception e) {
log.error(e.getMessage());
}
Map map = func1Service.getFunc1s(func1, pageNum, pageSize);
out.print(JSON.toJSONString(map));
}
实现业务逻辑
@Override
public Map getFunc1s(Func1 func1, int pageNum, int pageSize) {
Map mapRes = new HashMap<String, Object>();
try {
List<Func1> list = (List)dao.getPage(Func1Mapper.class, func1, pageNum, pageSize);
mapRes.put("lstFunc1", list);
PageInfo page = new PageInfo(list);
pageNum = page.getPageNum();
int firstPage = 1;
int lastPage = page.getLastPage();
int prevPage = (pageNum - 1) == 0 ? 1 : (pageNum - 1);
int nextPage = (pageNum + 1) > lastPage ? lastPage : (pageNum + 1);
String str = "<ul class='pagination'>";
if (page.isIsFirstPage()) {
str = str + " <li class='disabled'><a href='javascript:getPage(1)'>首 页</a></li>";
str = str + " <li class='disabled'><a href='javascript:getPage(" + prevPage + ")'>上一页</a></li>";
str = str + " <li class='active'><a href='javascript:void(0)'>第" + pageNum + "页</a></li>";
str = str + " <li class='" + (nextPage == 1 ? "disabled" : "") + "'><a href='javascript:getPage("
+ nextPage + ")'>下一页</a></li>";
str = str + " <li class='" + (lastPage == 1 ? "disabled" : "") + "'><a href='javascript:getPage("
+ lastPage + ")'>尾 页</a></li>";
} else if (page.isIsLastPage()) {
str = str + " <li><a href='javascript:getPage(1)'>首 页</a></li>";
str = str + " <li><a href='javascript:getPage(" + prevPage + ")'>上一页</a></li>";
str = str + " <li class='active'><a href='javascript:void(0)'>第" + pageNum + "页</a></li>";
str = str + " <li class='disabled'><a href='javascript:getPage(" + nextPage + ")'>下一页</a></li>";
str = str + " <li class='disabled'><a href='javascript:getPage(" + lastPage + ")'>尾 页</a></li>";
} else {
str = str + " <li><a href='javascript:getPage(1)'>首 页</a></li>";
str = str + " <li><a href='javascript:getPage(" + prevPage + ")'>上一页</a></li>";
str = str + " <li class='active'><a href='javascript:void(0)'>第" + pageNum + "页</a></li>";
str = str + " <li><a href='javascript:getPage(" + nextPage + ")'>下一页</a></li>";
str = str + " <li><a href='javascript:getPage(" + lastPage + ")'>尾 页</a></li>";
}
str = str + " </ul>";
mapRes.put("page", str);
} catch (Exception e) {
log.error(e.getMessage());
}
return mapRes;
}
数据库操作
public List<Object> getPage(Class cls,Object obj,int pageNum,int pageSize) {
SqlSession sqlSession = getConn();
List lst = null;
try {
MyMapper myMapper = (MyMapper) sqlSession.getMapper(cls);
lst = myMapper.getPage(obj,pageNum,pageSize);
return lst;
} finally {
sqlSession.close();
}
}
映射配置
public interface MyMapper {
public void insert(Object obj);
public Object getById(Integer id);
public Object getByObj(Object obj);
public List<Object> getAll();
public void update(Object obj);
public int update(Map map);
public int delete(Integer id);
List<Object> getPage(
@Param("obj") Object obj,
@Param("pageNumKey") int pageNum,
@Param("pageSizeKey") int pageSize);
}
编辑表对应的xml
<select id="getPage" resultMap="Func1ResultSet" parameterType="Func1">
SELECT * FROM func1
<if test="obj.fld2!=null ">
where fld2 like '%${obj.fld2}%'
</if>
</select>
添加分页jar包及json格式处理jar包
jsqlparser-1.0.jar pagehelper-5.1.1.jar fastjson-1.2.16.jar
编辑框架配置文件mybatis-config.xml
<configuration>
<properties resource="com/dlj/resources/db.properties" />
<typeAliases>
<typeAlias type="com.dlj.model.Stu" alias="Stu"></typeAlias>
<typeAlias type="com.dlj.model.Func1" alias="Func1"></typeAlias>
</typeAliases>
<plugins>
<!-- com.github.pagehelper为PageHelper类所在包名 -->
<plugin interceptor="com.github.pagehelper.PageInterceptor">
<property name="supportMethodsArguments" value="true"/>
<property name="params" value="pageNum=pageNumKey;pageSize=pageSizeKey;"/>
<property name="reasonable" value="true"/>
</plugin>
</plugins>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC" />
<dataSource type="POOLED">
<property name="driver" value="${jdbc.driverClassName}" />
<property name="url" value="${jdbc.url}" />
<property name="username" value="${jdbc.username}" />
<property name="password" value="${jdbc.password}" />
</dataSource>
</environment>
</environments>
<mappers>
<mapper resource="com/dlj/mapper/StuMapper.xml" />
<mapper resource="com/dlj/mapper/Func1Mapper.xml" />
</mappers>
</configuration>
启动应用地址栏直接请求查询动作
从菜鸟网站,复制bootstrap.min.css样式,最终效果