SpringBoot+Easyui+pagehelper实现真分页功能

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>

效果图
在这里插入图片描述

大功告成！

SpringBoot+Easyui+pagehelper实现真分页功能

猜你喜欢