Mybatis, Datatable 与 pagehelper 分页使用步骤
1. 明确需要添加和修改的文件
添加的文件：
DatatableResult
向文件内添加内容的文件：applicationContext-dao.xml和pom.xml
修改文件中内容的文件：IndexController和index.jsp
1.1 添加的文件
DatatableResult 的内容:
package com.hyd.dq.util;
import java.io.Serializable;
import java.util.List;
public class DatatableResult<T> implements Serializable {
private Integer draw;
private Integer recordsTotal;
private Integer recordsFiltered;
private List<T> data;
private String msg; //信息
private Integer code; //状态值
public Integer getDraw() {
return draw;
}
public void setDraw(Integer draw) {
this.draw = draw;
}
public Integer getRecordsTotal() {
return recordsTotal;
}
public void setRecordsTotal(Integer recordsTotal) {
this.recordsTotal = recordsTotal;
}
public Integer getRecordsFiltered() {
return recordsFiltered;
}
public void setRecordsFiltered(Integer recordsFiltered) {
this.recordsFiltered = recordsFiltered;
}
public List<T> getData() {
return data;
}
public void setData(List<T> data) {
this.data = data;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
}
1.2 向文件内添加内容的文件
applicationContext-dao.xml 添加的内容：
作用用于配置拦截器插件
<!-- 整合 mybatis: SqlSessionFactory -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!-- 数据源 -->
<property name="dataSource" ref="dataSource" />
<!-- mybatis 配置文件 -->
<property name="configLocation" value="classpath:mybatis/mybatis-config.xml" />
<!-- pagehelper 配置拦截器插件 -->
<!-- 注意其他配置 -->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<property name="properties">
<!--使用下面的方式配置参数，一行配置一个 -->
<value>
params=value1
</value>
</property>
</bean>
</array>
</property>
</bean>
pom.xml 添加的内容：
<!--pagehelper 整合包 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>${pagehelper.version}</version>
</dependency>
1.3 修改文件中内容的文件
IndexController 添加的内容：
@RequestMapping(value = "/list", method = RequestMethod.POST)
@ResponseBody
public DatatableResult<CAccCnv> index(int start, int length) {
DatatableResult<CAccCnv> datatableResult = new DatatableResult<>();
PageHelper.startPage(start / length + 1, length);
List<CAccCnv> list = cAccCnvService.selectByExample();
PageInfo<CAccCnv> pageInfo = new PageInfo<>(list);
datatableResult.setDraw(datatableResult.getDraw());
datatableResult.setData(pageInfo.getList());
datatableResult.setRecordsTotal((int) pageInfo.getTotal());
datatableResult.setRecordsFiltered(datatableResult.getRecordsTotal());
return datatableResult;
}
index.jsp 中修改 datatable 的内容：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="YKenan, list"/>
<title>list</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/dataTable.min.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="css/buttons.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/buttons.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<br/>
<br/>
<div class="container">
<div class="list_bg_body">
<table class="table datatable display table-bordered table-hover" id="myTable">
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="js/jszip.min.js"></script>
<script type="text/javascript" src="js/pdfmake.min.js"></script>
<script type="text/javascript" src="js/vfs_fonts.js"></script>
<script type="text/javascript" src="js/buttons.flash.min.js"></script>
<script type="text/javascript" src="js/buttons.print.min.js"></script>
<script type="text/javascript" src="js/buttons.html5.min.js"></script>
<script type="text/javascript" src="js/style.js"></script>
<script type="text/javascript" src="js/example.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var table = $('#myTable').DataTable({
"ajax": {
"url": "list",
"type": "POST"
},
"bProcessing": true,
"destroy": true,
//使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
//data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
"serverSide": true,//开启服务器模式:启用服务器分页
"lengthChange": false,//是否允许用户改变表格每页显示的记录数
"ordering": false,//是否允许用户排序
"paging": true,//是否分页
"pagingType": "full_numbers",//除首页、上一页、下一页、末页四个按钮还有页数按钮
/*"aLengthMenu": "[5, 10, 15]",*/
"processing": true,//是否显示处理状态
"scrollX": true,//允许水平滚动
/* "scrollY": "200px",
"scrollCollapse": "true", */
"searching": false,//是否开始本地搜索
"stateSave": false,//刷新时是否保存状态
"autoWidth": true,//自动计算宽度
//"deferRender": "true",//延迟渲染
"columns": [
{
"title": "YKenan1",
"data": 'yKenan1',
"orderable": false, //关闭排序图标
"sClass": "text-center"
},
{
"title": "YKenan2",
"data": 'yKenan2',
"orderable": false, //关闭排序图标
"sClass": "text-center"
},
{
"title": "YKenan3",
"data": 'yKenan4',
"orderable": false, //关闭排序图标
"sClass": "text-center"
},
{
"title": "YKenan4",
"data": 'yKenan4',
"orderable": false, //关闭排序图标
"sClass": "text-center"
},
{
"title": "YKenan5",
"data": 'yKenan5',
"orderable": false, //关闭排序图标
"sClass": "text-center"
}
],
"dom": 'Bfrtip',
"buttons": ['copy', 'excel', 'pdf', 'csv', 'print']
});
//给行绑定选中事件
$('#myTable tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
});
</script>
</body>
</html>
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
