datatables服务端分页完整案例
2018-03-04 15:40
507 查看
1.效果图:
2.html页面district.html
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> </html3.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; } }
相关文章推荐
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
- ThinkPHP整合datatables实现服务端分页
- datatables服务端分页配置最新教程2018
- laypage分页完整案例
- ThinkPHP整合datatables实现服务端分页的示例代码
- datatables 带查询条件java服务端分页处理
- datatables服务端分页之带参数查询以及跳页
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
- datatables 带查询条件java服务端分页处理实例
- dataTables分页展示数据注意事项(案例)(一)
- GridView高效分页+搜索的完整实现
- Spring Boot 整合 Thymeleaf 完整 Web 案例
- datatables.js 简单使用--多选框和服务器端分页
- bootstrap Table服务端处理分页(后台是.net)
- Python爬虫完整案例 - 爬取百度百科词条信息
- Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析
- mybatis分页插件使用案例(前端bootstrap)
- PHP分页完整
- DataTable 服务端模式 进行分页 排序搜索
- 环信JAVA服务端调用各接口完整实例