SpringBoot+Easyui+pagehelper實現真分頁功能
阿新 • • 發佈:2018-11-29
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>
效果圖
大功告成!