您的位置:首页 > 编程语言 > Java开发

datatables服务端分页完整案例

2018-03-04 15:40 507 查看
1.效果图:




2.html页面district.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>datatables 分页</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="hui/css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
</head>

<body>
<div class="container mt-5">
<table class="table table-bordered table-hover table-striped" id="tab">
<thead>
<tr>
<th>did</th>
<th>dname</th>
<th>cname</th>
<th>pname</th>
<th>postcode</th>
<th>areacode</th>
<th>orderid</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

<script src="hui/js/jquery-3.3.1.min.js"></script>
<script src="hui/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$("#tab").dataTable({
// 开始服务端分页——分页,取数据等等的都放到服务端去
serverSide: true,
// 载入数据的时候是否显示“载入中”
processing: true,
// 首次加载的数据条数
pageLength: 10,
// 全局控制列表的所有排序功能——排序操作在服务端进行,所以可以关了
ordering: false,
// 定义翻页组件的样式
//  simple -  只有上一页和下一页2个按钮
//  simple_numbers   – 上一页,下一页和页码
//  full – 首页,末页,上一页,下一页4个按钮
//  full_numbers   – 全部按钮和页面
pagingType: "full_numbers",
// 是否自适应宽度
autoWidth: false,
// 禁用datatables搜索
searching: false,
// 汉化
language: {
url: "css/zh_CN.txt"
},
// data - 发送到服务器的参数
// callback - 回调函数 服务器回传的集合应该传给这个回调函数,作为其参数
// settings - DT的配置对象。
ajax: function (data, callback, settings) {
// 封装请求参数
let param = {
draw: data.draw,
start: data.start,
length: data.length
};

$.ajax({
type: "get",
url: "district",
cache: false, // 禁用缓存
data: param,
dataType: "json",
success: (pager)=>{
console.log(pager);
// 封装返回数据
let returnData = {
draw: pager.draw,// 请求次数
recordsTotal: pager.recordsTotal,// 总记录数
recordsFiltered: pager.recordsFiltered,// 后台不实现过滤功能,每次查询均视作全部结果
data: pager.data // 分页数据
};

// 调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
callback(returnData);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
},
// 列的初始状态的定义,该参数一个是对象数组,每一个对象元素定义一个列.注意,不需定义的列也必须以null占位
columns: [
{"data": "did"},
{"data": "dname"},
{"data": "cname"},
{"data": "pname"},
{"data": "postcode"},
{"data": "areacode"},
{"data": "orderid"},
]
});
});
</script>
</body>
</html
3.servlet页面DistricServlet.java
package com.XXX.servlet;

import com.XXX.dao.DistrictViewDao;
import com.XXX.pager.Pager;
import com.XXX.pojo.DistrictView;
import net.sf.json.JSON;
import net.sf.json.JSONSerializer;
import org.apache.commons.lang.math.NumberUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(name = "${Entity_Name}", urlPatterns = "/${Entity_Name}")
public class DistrictServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("application/json;charset=utf-8");

// 1.获得页面数据
Integer draw = NumberUtils.createInteger(request.getParameter("draw")); // 请求次数
Integer start = NumberUtils.createInteger(request.getParameter("start")); // 分页第一个数据索引
Integer length = NumberUtils.createInteger(request.getParameter("length")); // 分页记录数
System.out.println("draw:"+draw+" "+"start:"+start+" "+"length:"+length);

DistrictViewDao dao = new DistrictViewDao();
// 2.查询数据库
int total = dao.getTotal(); // 总记录数
List<DistrictView> data = dao.find(start,length); // 分页数据

// 3.封装分页类对象
Pager<DistrictView> pager = new Pager<DistrictView>();
pager.setDraw(draw);
pager.setRecordsTotal(total);
pager.setRecordsFiltered(total);
pager.setData(data);

// 4.转为json格式
JSON json = JSONSerializer.toJSON(pager);

PrintWriter out = response.getWriter();
// 5.响应给客户端
out.println(json.toString());

out.flush();
out.close();
}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
4.dao层DistrictViewDao.java
package com.XXX.dao;

import com.XXX.pojo.DistrictView;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

public class DistrictViewDao {
/**
* 获得总记录数
*
* @return 总记录数
*/
public int getTotal(){
int total = 0;
SqlSession sqlSession = null;
try {
sqlSession = MybatisSessionFactory.getSessionFactory().openSession();
DistrictViewMapper mapper = sqlSession.getMapper(DistrictViewMapper.class);
total = mapper.getTotal();
} finally {
sqlSession.close();
}
return total;
}

/**
* 查询分页数据
*
* @param page 查询页码
* @param length 每页记录数
* @return 分页数据
*/
public List<DistrictView> find(int page,int length){
List<DistrictView> list = null;
SqlSession sqlSession = null;
try {
sqlSession = MybatisSessionFactory.getSessionFactory().openSession();
DistrictViewMapper mapper = sqlSession.getMapper(DistrictViewMapper.class);
list = mapper.find(page,length);
} finally {
sqlSession.close();
}
return list;
}
}
5.其他DistrictView.java
package com.XXX.pojo;

/**
* 区县表视图类
*/
public class DistrictView {
//did	dname	cname	pname	postcode	areacode	orderid
private Integer did;
private String dname;
private String cname;
private String pname;
private String postcode;
private String areacode;
private Integer orderid;

public DistrictView() {
}

public Integer getDid() {
return did;
}

public void setDid(Integer did) {
this.did = did;
}

public String getDname() {
return dname;
}

public void setDname(String dname) {
this.dname = dname;
}

public String getCname() {
return cname;
}

public void setCname(String cname) {
this.cname = cname;
}

public String getPname() {
return pname;
}

public void setPname(String pname) {
this.pname = pname;
}

public String getPostcode() {
return postcode;
}

public void setPostcode(String postcode) {
this.post
95ee
code = postcode;
}

public String getAreacode() {
return areacode;
}

public void setAreacode(String areacode) {
this.areacode = areacode;
}

public Integer getOrderid() {
return orderid;
}

public void setOrderid(Integer orderid) {
this.orderid = orderid;
}
}
Pager.java
package com.XXX.pager;

import java.util.List;

/**
* 分页封装类
*
* @param <T>
*/
public class Pager<T> {
// 请求数据的次数(原样返回即可)
private Integer draw;
// 过滤前的总记录数(即数据库中记录的总数)
private Integer recordsTotal;
// 过滤后的总记录数(后台不实现过滤功能,每次查询均视作全部结果  )
private Integer recordsFiltered;
// 分页数据(要在表格中显示的数据)
private List<T> data;

public Pager() {
}

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;
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息