这个插件我感觉挺好用,配置也简单,自带条件对象,下面我就以我的项目代码来说明:
首先重要的两个依赖:
<script src="../../hplus/plugins/hjk/plugins/DataTables/js/jquery.dataTables.js"></script>
<link href="../../hplus/plugins/hjk/plugins/DataTables/css/data-table.css" rel="stylesheet"> 接下来是前台代码:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <!-- Mirrored from www.zi-han.net/theme/hplus/weixinportal.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:58 GMT --> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>微信菜单</title> <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台"> <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术"> <link rel="shortcut icon" href="../favicon.ico"> <link href="../../hplus/css/bootstrap.min14ed.css?v=3.0.3" rel="stylesheet"> <link href="../../hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="../../hplus/css/animate.min.css" rel="stylesheet"> <link href="../../hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet"> <link href="../../hplus/plugins/hjk/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/> <link href="../../hplus/plugins/hjk/css/bootstrap-treeview.css" rel="stylesheet"> <link href="../../hplus/plugins/hjk/plugins/gritter/css/jquery.gritter.css" rel="stylesheet"> <link href="../../hplus/plugins/hjk/plugins/bootstrap-select-1.12.1/css/bootstrap-select.min.css" rel="stylesheet"> <link href="../../hplus/plugins/hjk/plugins/DataTables/css/data-table.css" rel="stylesheet"> </head> <!--解决表格标题内容居中问题--> <style> table tr td{ text-align: center!important; } table tr th{ text-align: center!important; } </style> <body class="gray-bg"> <form class="form-horizontal form-bordered" data-parsley-validate="true" name="bgPicture-form" id="bgPicture-form"> <div class="modal-body"> <div class="form-group"> <div class="row"> <div class="col-sm-12" > <div class="ibox "> <div class="ibox-content"> <form class="form-horizontal form-bordered" id="queryForm"> <div class="form-group"> <div class="col-md-4 "> <div class="input-group"> <span class="input-group-addon">提问内容:</span> <input id="description" type="text" class="form-control"> </div> <div class="input-group"> <span class="input-group-addon">提问人:</span> <input id="username" type="text" class="form-control"> </div> </div> <div class="col-md-4 "> <div class="input-group"> <button type="button" class="btn btn-primary m-r-5 m-b-5" id="query">查询</button> </div> </div> <div class="col-md-4 "> <div class="input-group"> <button type="button" id="submitContentBtn" class="btn btn-sm btn-primary">查看详情</button> </div> </div> </div> </form> <hr> <div class="table-responsive"> <table id="data-table" class="table table-striped table-bordered display" cellspacing="0" width="100%"> <thead> <tr> <th> <input type="checkbox" class="checkall" /> </th> <th >ID</th> <th >提问人</th> <th >提问内容</th> <th >提问时间</th> <th >图片数量</th> <th >回复人</th> </tr> </thead> <tbody id="tbodyId"> <tr> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </form> <script src="../../hplus/js/jquery.min.js?v=2.1.4"></script> <script src="../../hplus/js/content.min.js?v=1.0.0"></script> <script src="../../hplus/plugins/hjk/js/bootstrap-treeview.js"></script> <script src="../../hplus/plugins/hjk/plugins/gritter/js/jquery.gritter.js"></script> <script src="../../hplus/plugins/hjk/plugins/parsley/dist/parsley.js"></script> <script src="../../hplus/plugins/hjk/plugins/jquery/jquery.form.js"></script> <script src="../../hplus/plugins/hjk/plugins/jquery-confirm/jquery-confirm.min.js"></script> <script src="../../hplus/plugins/hjk/plugins/bootstrap-select-1.12.1/js/bootstrap-select.min.js"></script> <script src="../../hplus/plugins/hjk/plugins/bootstrap-select-1.12.1/js/i18n/defaults-zh_CN.min.js"></script> <script src="../../hplus/plugins/hjk/plugins/switchery/switchery.min.js"></script> <script src="../../hplus/plugins/hjk/plugins/DataTables/js/jquery.dataTables.js"></script> <script src="../../hplus/js/bootstrap.min.js?v=3.3.6"></script> <script> $(document).ready(function () { //初始化按钮绑定事件 $("#query").click(function(){ t.ajax.reload(); }); var t=null; t=$("#data-table").DataTable( { "processing":true, "serverSide":true, "pageLength": 10, //首次加载的数据条数 "ordering": false, //排序操作在服务端进行，所以可以关了。 "paging":true, "pagingType": "full_numbers", "autoWidth": false, "searching": false,//禁用搜索 "columns": [ //序号 { "sClass": "text-center", "data": "id", "render": function (data, type, full, meta) { return '<input type="checkbox" class="checkchild" value="' + data + '" />'; }, "bSortable": false }, //ID {"data": "id"}, //提问人 { "data": "openid" }, //提问详情 { "data": "description"}, //提问时间 { "data": "gmtCreate" }, //图片数 { "data": "imageNumber" }, //回复人 { "data": "replyName" } ], "ajax":{ type: "get", url:'/quiz/service', data: function (d) { var param = {}; param.draw = d.draw; param.start = d.start; param.length = d.length; //获得提问人搜索条件 var username = $("#username").val(); //给请求添加条件 if(username!=undefined){ param.username = username; } //获得提问人搜索条件 var description = $("#description").val(); //给请求添加条件 if(description!=undefined){ param.description = description; } return param;//自定义需要传递的参数。 } } } ); }); /*查看内容详情*/ $("#submitContentBtn").click(function () { //获取选中的某一个checkbox的值 if ($(".checkchild:checked").length > 1){ $.alert({ title: '提示', content: '一次只能选择一条数据!', }); return; }else if($(".checkchild:checked").length == 0){ $.alert({ title: '提示', content: '请选择一条数据!', }); return; } //获取ID var id = $(".checkchild:checked").val(); //将ID存入localStorage会话中 localStorage.setItem("id",id) //加载详情页 window.location.href="/quiz/details"; }); </script> </body> </html>分页封装实体类:
package com.zenithink.spp.cms.util; import java.util.List; public class Datatables<T> { //每页显示集合 private List<T> data;//LIST（结果集） //总记录数 private long recordsTotal; private long recordsFiltered; //请求次数 private long draw; public Datatables() { } public long getDraw() { return draw; } public void setDraw(long draw) { this.draw = draw; } public List<T> getData() { return data; } public void setData(List<T> data) { this.data = data; } public long getRecordsTotal() { return recordsTotal; } public void setRecordsTotal(long recordsTotal) { this.recordsTotal = recordsTotal; this.recordsFiltered = recordsTotal; } public long getRecordsFiltered() { return recordsFiltered; } public void setRecordsFiltered(long recordsFiltered) { this.recordsFiltered = recordsFiltered; } }接下来是后台代码:
/** * 提问模块分页 * @param draw 请求次数 * @param start 起始数 * @param length 每页显示数 * @param username 条件查询昵称 * @param description 条件查询内容 * @param request * @return */ @RequestMapping(value = "/service",method = RequestMethod.GET) @ResponseBody public Datatables<Map<String,Object>> quizPage2(Integer draw , Integer start, Integer length, String username, String description, HttpServletRequest request){ //记录总条数 int total=0; //总记录数 List<Map<String,Object>> rowsList=new ArrayList<>(); try { //若接收到的提问人不为空 if(username!=null&&!username.equals("")){ //创建条件查询对象 Wrapper<WeixinUser> wrapper = new EntityWrapper<WeixinUser>(); //添加查询条件 wrapper.like("nickname", username); //获得模糊查询到的用户集合 List<WeixinUser> Userlist= weixinUserService.selectList(wrapper); //创建接收用户openid的集合 List<String> openidList= new ArrayList<String>(); if (Userlist != null && Userlist.size() != 0) { //遍历获得openid并添加到集合中 for (WeixinUser weixinUser : Userlist) { openidList.add(weixinUser.getOpenid()); } } //遍历openid集合进行条件添加 for (String s : openidList) { if(openidList!=null&&openidList.size()!=0){ //创建提问条件对象 Wrapper<QuestionInfo> ew=new EntityWrapper<QuestionInfo>(); //添加条件 ew.where("openid={0}",s); //判断接收到的当前页和每页显示的集合数是否合法 if(length>=1){ //根据起始数得到当前页 start=(start==0)?1:(start/length + 1); //给mybatis 分页实体设置当前页和每页显示数 Page<QuestionInfo> page=new Page<QuestionInfo>(start,length); //查询条件 ew.where("del_flag={0}", 1); //若接收到的内容不为空进行模糊查询 if(description!=null&&!description.equals("")){ //添加模糊查询内容 ew.like("description",description); } //根据创建时间进行排序 ew.orderBy("gmt_create",false); //根据分页条件查询 Page<Map<String, Object>> mapPage = questionInfoService.selectMapsPage(page, ew); //获得总条数并进行累加 total+=mapPage.getTotal(); //获得查询的提问对象集合 List<Map<String,Object>> list=mapPage.getRecords(); if(list!=null&&list.size()!=0){ //遍历集合 for (Map<String, Object> map : list) { //获得提问的id Object o= map.get("id"); //将id转换成Integer类型 Integer question_id=Integer.parseInt(String.valueOf(o)); //创建条件查询对象 Wrapper<PestImage> wr=new EntityWrapper<>(); //添加查询条件 wr.where("question_id={0}",question_id); //进行查询获得图片的数量 int count=pestImageService.selectCount(wr); //将图片数量封装到提问对象中 map.put("imageNumber",count); //获得用户的ID Object openid=map.get("openid"); //根据用户ID查询用户 WeixinUser weixinUser = weixinUserService.selectById(String.valueOf(openid)); //将用户名封装到集合中 if(weixinUser!=null){ map.put("openid",weixinUser.getNickname()); } //解决页面无值封装警告 if(map.get("description")==null||map.get("description")==""){ map.put("description","无"); } if(map.get("replyName")==null||map.get("replyName")==""){ map.put("replyName","无回复人"); } //解决页面显示时间不能格式化问题 Object gmtCreate=map.get("gmtCreate"); map.put("gmtCreate",String.valueOf(gmtCreate)); rowsList.add(map); } } } } } }else { if(length>=1){ //根据起始数得到当前页 start=(start==0)?1:(start/length + 1); //给mybatis 分页实体设置当前页和每页显示数 Page<QuestionInfo> page=new Page<QuestionInfo>(start,length); Wrapper<QuestionInfo> ew=new EntityWrapper<QuestionInfo>(); //查询条件 ew.where("del_flag={0}", 1); //若接收到的内容不为空进行模糊查询 if(description!=null&&!description.equals("")){ //模糊查询内容 ew.like("description",description); } //根据创建时间进行排序 ew.orderBy("gmt_create",false); //根据分页条件查询 Page<Map<String, Object>> mapPage = questionInfoService.selectMapsPage(page, ew); total+=mapPage.getTotal(); //获得查询的提问对象集合 List<Map<String,Object>> list=mapPage.getRecords(); if(list!=null&&list.size()!=0){ //遍历集合 for (Map<String, Object> map : list) { //获得提问的id Object o= map.get("id"); //将id转换成Integer类型 Integer question_id=Integer.parseInt(String.valueOf(o)); //创建条件查询对象 Wrapper<PestImage> wr=new EntityWrapper<>(); //添加查询条件 wr.where("question_id={0}",question_id); //进行查询获得图片的数量 int count=pestImageService.selectCount(wr); //将图片数量封装到提问对象中 map.put("imageNumber",count); //获得用户的ID Object openid=map.get("openid"); //根据用户ID查询用户 WeixinUser weixinUser = weixinUserService.selectById(String.valueOf(openid)); //将用户名封装到集合中 if(weixinUser!=null){ map.put("openid",weixinUser.getNickname()); } //解决页面无值封装警告 if(map.get("description")==null||map.get("description")==""){ map.put("description","无"); } if(map.get("replyName")==null||map.get("replyName")==""){ map.put("replyName","无回复人"); } //解决页面显示时间不能格式化问题 Object gmtCreate=map.get("gmtCreate"); map.put("gmtCreate",String.valueOf(gmtCreate)); rowsList.add(map); } } } } //创建分页封装实体对象 Datatables<Map<String,Object>> data = new Datatables<Map<String,Object>>(); //封装返回的分页集合 data.setData(rowsList); //封装分页插件的请求次数 data.setDraw(draw); //封装总记录数 data.setRecordsTotal(total); //将数据转成JSON返回页面 return data; } catch (Exception e) { e.printStackTrace(); return null; } }
下面是页面效果:
