1.首先引入jar包
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.3</version>
</dependency>
2.在启动类里加如下代码
@Bean
public PageHelper pageHelper(){
//分页插件
PageHelper pageHelper = new PageHelper();
Properties properties = new Properties();
properties.setProperty("offsetAsPageNum","true");
properties.setProperty("rowBoundsWithCount","true");
properties.setProperty("reasonable", "true");
properties.setProperty("supportMethodsArguments", "true");
properties.setProperty("returnPageInfo", "check");
properties.setProperty("params", "pageNum=page; pageSize=rows; orderBy=orderBy");//当前页,一页多少行,排序(字段+" "+排序方式)
properties.setProperty("dialect", "sqlserver");//配置sqlserver数据库方言
pageHelper.setProperties(properties);
//添加插件
new SqlSessionFactoryBean().setPlugins(new Interceptor[]{pageHelper});
return pageHelper;
}
3.接口,WorkSheetDataConteoller
package com.wx_wood_java.custommapper;
import com.wx_wood_java.customentity.WorkSheetData;
import java.util.List;
public interface CustomWorkSheetDataMapper {
//查询WorkSheetCode
public List<WorkSheetData> selectAllWorkSheetData(String workSheetCode);
}
4.mybatis,CustomWorkSheetDataMapper.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.wx_wood_java.custommapper.CustomWorkSheetDataMapper" >
<select id="selectAllWorkSheetData" resultType="com.wx_wood_java.customentity.WorkSheetData">
SELECT WorkSheetCode,WorkSheetName FROM WorkSheetData
</select>
</mapper>
5.controller层
package com.wx_wood_java.controller;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wx_wood_java.customentity.WorkSheetData;
import com.wx_wood_java.custommapper.CustomWorkSheetDataMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
public class WorkSheetDataConteoller {
@Autowired
private CustomWorkSheetDataMapper customWorkSheetDataMapper;
@RequestMapping("/testPaging")
public String testPaging() {
return "testPaging";
}
@RequestMapping("/showWorkSheetData")
@ResponseBody
public Map showWorkSheetData(HttpServletRequest req){
//翻页数
int page = Integer.valueOf(req.getParameter("page"));
//每页显示条数
int rows = Integer.valueOf(req.getParameter("rows"));
//排序字段名
String sort = req.getParameter("sort");
//排序方式
String order = req.getParameter("order");
List<WorkSheetData> selectAllList = new ArrayList<>();
//测试分页!
PageHelper.startPage(page, rows, sort + " " + order);
//查询数据返回集合
selectAllList = customWorkSheetDataMapper.selectAllWorkSheetData(null);
Map<String, Object> resultMap = new HashMap<>();
PageInfo<WorkSheetData> pageInfo = new PageInfo<WorkSheetData>(selectAllList);
//总条数
resultMap.put("total", pageInfo.getTotal());
//数据
resultMap.put("rows", selectAllList);
return resultMap;
}
}
6.testPaging.jsp页面
css与js放在webapp目录下
链接:https://pan.baidu.com/s/1V90AmSq2MBPGJQsZ0L7R1Q
提取码:z1ta
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
</head>
<body style="width: 100%; height: 100%">
<div class="easyui-layout" style="width:600px;height:600px;">
<div data-options="region:'center'" style="height: 500px;">
<div id = "divWorkSheetData"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#divWorkSheetData").datagrid({
title: '',
width:'auto',
rownumbers: false,
nowrap: true,
autoRowHeight: false,
striped: false,
fit: false,
singleSelect: false,
//选中复选框后选中行
selectOnCheck: true,
//选中行后选中复选框
checkOnSelect: true,
url: '${pageContext.request.contextPath}/showWorkSheetData',
sortName: 'WorkSheetCode',
sortOrder: 'desc',
idField: '',
showFooter: true,
frozenColumns:[[
{
field: 'numbers',
title: 'i',
align: 'center',
formatter: function (val, row, index) {
var op = $('#divWorkSheetData').datagrid('options');
if (row.workSheetCode != null && row.workSheetCode != '') {
return op.pageSize * (op.pageNumber - 1) + (index + 1);
} else {
return "";
}
}
},
{field: 'ck', checkbox: true},
]],
columns:[[
{
field:"workSheetCode",title: '工单号', width: 120, align: 'center', hidden: false,
formatter: function (value, row, index) {
if (row.workSheetCode != null && row.workSheetCode != '') {
return '<span style = "color:black;">' + row.workSheetCode + '</span>';
}
}
},
{
field:"workSheetName",title: '工单名称', width: 300, align: 'center', hidden: false,
formatter: function (value, row, index) {
if (row.workSheetName != null && row.workSheetName != '') {
return '<span style = "color:black;">' + row.workSheetName + '</span>';
}
}
}
]],
pagination: true,
pageList: [15, 20, 25],
pageSize: 15
})
})
</script>
</html>
效果图
大功告成!