JQuery Datatable 示例

JQuery Datatable 简介

本博客代码下载地址：下载代码

服务器端

创建Maven项目，导入jquery datatable相关文件

Maven依赖

<dependency> <groupId>junit private Integer deptno; private String dname; private String loc; //……getter/setter、默认构造方法、全参构造方法 } 

DBUtil.java

public final class DBUtil { private static final String url = "jdbc:mysql://localhost:3306/db_test?useSSL=false&serverTimezone=GMT%2B8";//连接字符串 private static final String name = "root"; //用户名 private static final String pass = "root"; //密码 static {// 1、加载驱动 try { Class.forName("com.mysql.cj.jdbc.Driver"); } catch (ClassNotFoundException e) { throw new ExceptionInInitializerError(e); } } public static Connection getConnection() throws SQLException { return DriverManager.getConnection(url, name, pass); } public static void free(ResultSet rs, Statement stmt, Connection conn) { try { // 建议采用这种形式来释放资源，因为finally里面的一定会被释放 if (rs != null) { rs.close(); } } catch (SQLException e) { e.printStackTrace(); } finally { try { if (stmt != null) { stmt.close(); } } catch (SQLException e) { e.printStackTrace(); } finally { if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } } } 

内存假分页 DeptService.java

@WebServlet(urlPatterns = "/dept3") public class DeptServlet3 extends HttpServlet { private DeptService deptService = new DeptService(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter out = resp.getWriter(); List<Dept> depts = null; try { depts = deptService.getAll(); //一次性查询出来全部数据，适用于数据量小的情况，Datatable可以做内存分页 } catch (SQLException e) { e.printStackTrace(); } String json = JSON.toJSONString(depts); String res = "{\"data\":" + json + "}"; System.out.println(res); out.write(res); out.flush(); } } 

服务器端返回数据格式

{ "data": [ { "deptno": 1, "dname": "4294-83cf", "loc": "4bbf-9696" }, { "deptno": 2, "dname": "4685-8e72", "loc": "4662-8eaa" }, { "deptno": 3, "dname": "49ff-95c2", "loc": "488c-a126" }, { "deptno": 4, "dname": "4ae7-9cb2", "loc": "47d0-8340" }, { "deptno": 5, "dname": "45da-9b17", "loc": "4060-8ba0" }, { "deptno": 6, "dname": "4599-85a7", "loc": "4559-8f52" } ] } 

页面实现一

 $('#example').DataTable({ "ajax": "dept3", "columns": [ //不带title时表格在显示时就没有标题了 {"title": "部门编号", "data": "deptno"}, {"title": "部门名称", "data": "dname"}, {"title": "部门地址", "data": "loc"} ] }); });  $('#example').DataTable({ "processing": true, //加载效果 "ajax": { url: "dept3", "type": "get" }, "columns": [ //不带title时表格在显示时就没有标题了 {"title": "部门编号", "data": "deptno"}, {"title": "部门名称", "data": "dname","bSortable":false},//不允许排序 {"title": "部门地址", "data": "loc"} ], "oLanguage": {//下面是一些汉语翻译 "sSearch": "搜索", "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "没有检索到数据", "sInfo": "显示 _START_ 至 _END_ 条   共 _TOTAL_ 条", "sInfoFiltered": "(筛选自 _MAX_ 条数据)", "sInfoEmtpy": "没有数据", "sProcessing": "正在加载数据...", "sProcessing": "", //这里是给服务器发请求后到等待时间显示的加载gif "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "末页" } }, "aoColumnDefs": [//和aoColums类似，可以给指定列附加属性 {"bSortable": false, "aTargets": [2]}, //第1,3列（从0开始算） 不能排序 {"bSearchable": false, "aTargets": [0, 1]}, //是否可以全局搜索，在服务器端分页中是没用的 ], "aaSorting": [[1, "desc"]], //第1列倒序排序(从第0列开始) }); });  private DeptService deptService = new DeptService(); @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter out = resp.getWriter(); try { getWithPage(req, out); } catch (SQLException e) { e.printStackTrace(); } out.flush(); } private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException { String sEcho = "";//请求次数 String sSearch = ""; //搜索字符患上 int pageNum = 1; //当前页页码 int pageSize = 10;//每页显示数据条数 String params = req.getParameter("aoData"); System.out.println(params); JSONArray array = JSONArray.parseArray(params); //这里获取从前台传递过来的参数，从而确保是否分页、是否进行查询、是否排序等 for (int i = 0; i < array.size(); i++) { JSONObject obj = (JSONObject) array.get(i); if (obj.get("name").equals("sEcho")) { sEcho = obj.getString("value"); } if (obj.get("name").equals("sSearch")) { sSearch = obj.getString("value"); } if (obj.get("name").equals("iDisplayStart")) { pageNum = obj.getIntValue("value"); } if (obj.get("name").equals("iDisplayLength")) { pageSize = obj.getIntValue("value"); } } List<Object[]> data = new ArrayList<>(); List<Dept> depts = deptService.getWithPage(sSearch, pageNum, pageSize); for (Dept dept : depts) { Object[] obj = {dept.getDeptno(), dept.getDname(), dept.getLoc()}; data.add(obj); } int count = deptService.count(sSearch); JSONObject res = new JSONObject(); res.put("sEcho", sEcho); res.put("iTotalRecords", count);//实际的行数  res.put("iTotalDisplayRecords", count);//显示的行数  res.put("aaData", data);//要以JSON格式返回，否则前台没法显示  System.out.println(res); out.write(res.toJSONString()); } } 

服务器端返回数据格式

{ "sEcho": "1", "iTotalDisplayRecords": 74, "iTotalRecords": 74, "aaData": [ [ 1, "4294-83cf", "4bbf-9696" ], [ 2, "4685-8e72", "4662-8eaa" ], [ 3, "49ff-95c2", "488c-a126" ], [ 4, "4ae7-9cb2", "47d0-8340" ] ] } 

页面代码

 $("#tb").dataTable({ "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "bFilter": true, //过滤功能 "bSort": false, //排序功能 "bInfo": true,//页脚信息 "bAutoWidth": true,//自动宽度 "bProcessing": true,//是否显示取数据时的正在加载中……提示，特别是大数据量的时候，开启此功能比较好 "bServerSide": true,//开启服务器模式，使用服务器端处理配置datatable。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。 "sAjaxSource": "dept4",//这个是请求的地址 "fnServerData": retrieveData//获取数据的处理函数 }); }); //3个参数的名字可以随便命名,但必须是3个参数,少一个都不行 function retrieveData(sSource, aoData, fnCallback) { $.ajax({ url: sSource,//这个就是请求地址对应sAjaxSource data: {"aoData": JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数,分页,排序,查询等的值 type: 'post', dataType: 'json', async: false, success: function (result) { fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的 }, error: function (msg) { } }); }  private DeptService deptService = new DeptService(); @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter out = resp.getWriter(); try { getWithPage(req, out); } catch (SQLException e) { e.printStackTrace(); } out.flush(); } private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException { String sEcho = "";//请求次数 String sSearch = ""; //搜索字符患上 int pageNum = 1; //当前页页码 int pageSize = 10;//每页显示数据条数 String params = req.getParameter("aoData"); System.out.println(params); JSONArray array = JSONArray.parseArray(params); //这里获取从前台传递过来的参数，从而确保是否分页、是否进行查询、是否排序等 for (int i = 0; i < array.size(); i++) { JSONObject obj = (JSONObject) array.get(i); if (obj.get("name").equals("sEcho")) { sEcho = obj.getString("value"); } if (obj.get("name").equals("sSearch")) { sSearch = obj.getString("sSearch"); } if (obj.get("name").equals("iDisplayStart")) { pageNum = obj.getIntValue("value"); } if (obj.get("name").equals("iDisplayLength")) { pageSize = obj.getIntValue("value"); } } List<Dept> depts = deptService.getWithPage(sSearch,pageNum, pageSize); int count = deptService.count(sSearch); JSONObject res = new JSONObject(); res.put("sEcho", sEcho); res.put("iTotalRecords", count);//实际的行数  res.put("iTotalDisplayRecords", count);//显示的行数  res.put("aaData", depts);//要以JSON格式返回，否则前台没法显示  System.out.println(res); out.write(res.toJSONString()); } } 

服务器端返回数据格式

{ "sEcho": "1"， "iTotalDisplayRecords": 74, "iTotalRecords": 74, "aaData": [ { "deptno": 1, "dname": "4294-83cf", "loc": "4bbf-9696" }, { "deptno": 2, "dname": "4685-8e72", "loc": "4662-8eaa" }, { "deptno": 3, "dname": "49ff-95c2", "loc": "488c-a126" } ] } 

页面代码

 $("#tb").dataTable({ "bProcessing": false,//是否显示取数据时的那个等待提示 "bServerSide": true,//这个用来指明是通过服务端来取数据 "sAjaxSource": "dept5",//给服务器发请求的url "fnServerData": retrieveData,//获取数据的处理函数 "oLanguage": {//下面是一些汉语翻译 "sSearch": "搜索", "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "没有检索到数据", "sInfo": "显示 _START_ 至 _END_ 条   共 _TOTAL_ 条", "sInfoFiltered": "(筛选自 _MAX_ 条数据)", "sInfoEmtpy": "没有数据", "sProcessing": "正在加载数据...", "sProcessing": "", //这里是给服务器发请求后到等待时间显示的加载gif "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "末页" } }, "aoColumns": [ //这个属性下的设置会应用到所有列，按顺序没有是空 {"mData": 'deptno'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列 {"mData": 'dname'}, {"mData": 'loc'} ] }); }); //3个参数的名字可以随便命名,但必须是3个参数,少一个都不行 function retrieveData(sSource, aoData, fnCallback) { $.ajax({ url: sSource,//这个就是请求地址对应sAjaxSource data: {"aoData": JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数,分页,排序,查询等的值 type: 'post', //使用Post方式传递数据 dataType: 'json', async: false, success: function (result) { fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的 }, error: function (msg) { } }); }  private Integer draw; private Integer recordsTotal; //也可以是Integer类型 private Integer recordsFiltered;//也可以是Integer类型 private List<T> data; //……getter/setter、默认构造方法、全参构造方法 } 

服务器端代码

@WebServlet(urlPatterns = "/dept7") public class DeptServlet7 extends HttpServlet { private DeptService deptService = new DeptService(); @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter out = resp.getWriter(); try { getWithPage(req, out); } catch (SQLException e) { e.printStackTrace(); } out.flush(); } private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException { int sEcho = 1;//请求次数 String sSearch = ""; //搜索字符患上 int pageNum = 1; //当前页页码 int pageSize = 10;//每页显示数据条数 String params = req.getParameter("aoData"); System.out.println(params); JSONArray array = JSONArray.parseArray(params); //这里获取从前台传递过来的参数，从而确保是否分页、是否进行查询、是否排序等 for (int i = 0; i < array.size(); i++) { JSONObject obj = (JSONObject) array.get(i); if (obj.get("name").equals("sEcho")) { sEcho = obj.getIntValue("value"); } if (obj.get("name").equals("sSearch")) { sSearch = obj.getString("sSearch"); } if (obj.get("name").equals("iDisplayStart")) { pageNum = obj.getIntValue("value"); } if (obj.get("name").equals("iDisplayLength")) { pageSize = obj.getIntValue("value"); } } List<Dept> depts = deptService.getWithPage(sSearch, pageNum, pageSize); int count = deptService.count(sSearch); DataTable<Dept> dataTable = new DataTable<>(); dataTable.setData(depts); dataTable.setDraw(sEcho); dataTable.setData(depts); dataTable.setRecordsFiltered(count); dataTable.setRecordsTotal(count); String res = JSON.toJSONString(dataTable); System.out.println("7  " + res); out.write(res); } } 

服务器端返回数据格式

{ "data": [ { "deptno": 1, "dname": "4294-83cf", "loc": "4bbf-9696" }, { "deptno": 2, "dname": "4685-8e72", "loc": "4662-8eaa" }, { "deptno": 3, "dname": "49ff-95c2", "loc": "488c-a126" } ], "draw": 1, "recordsFiltered": 74, "recordsTotal": 74 } 

页面代码

 "bProcessing": false,//是否显示取数据时的那个等待提示 "bServerSide": true,//这个用来指明是通过服务端来取数据 "sAjaxSource": "dept7",//给服务器发请求的url "fnServerData": retrieveData,//获取数据的处理函数 "aoColumns": [ //这个属性下的设置会应用到所有列，按顺序没有是空 {"mData": 'deptno'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列 {"mData": 'dname'}, {"mData": 'loc'} ] }); //3个参数的名字可以随便命名,但必须是3个参数,少一个都不行 function retrieveData(sSource, aoData, fnCallback) { $.ajax({ url: sSource,//这个就是请求地址对应sAjaxSource data: {"aoData": JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数,分页,排序,查询等的值 type: 'post', //使用Post方式传递数据 dataType: 'json', async: true, success: function (result) { fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的 }, error: function (msg) { } }); } //点击某行后高亮 $('#tb').on('click', 'tr', function () { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } });