datatables表格插件实现前后端排序+分页+条件查询 |
您所在的位置：网站首页 › 分页前端需要做什么准备工作 › datatables表格插件实现前后端排序+分页+条件查询 |
datatables表格插件实现前后端排序+分页+条件查询
|
1、在页面中引入datatables需要的js及css文件，定义一个表格 账号; ;; 姓名; ;; 工号; ;; 部门; 选择部门 ${dept.name } ;; 状态; 选择状态 ${status.item } 工作性质; 选择类别 ${jtype.item } ;; 入职日期; ;;转正日期; ;;离职日期; ;;生日月份; 查询 工号 姓名 账号 部门 职位 性别 联系电话 出生年月 入职日期 在职状态 工作性质 操作 2、页面分页+排序+条件查询js代码 $(function(){ var $table = $("#entryInfoTable"); var _table = $table.dataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION, { ajax : function(data, callback, settings) { //封装请求参数 var param = userManage.getQueryCondition(data);//调用方法获取页面查询条件，已经分页所需要的数据 $.ajax({ type: "GET", url: "/entry/getEmployeeEntryInfos", cache : false, //禁用缓存 data: param, //传入已封装的参数 dataType: "json", success: function(result) {//从后台获取查询出的数据后做的处理 //异常判断与处理 if (result.errorCode) { alert("查询失败"); return; } //封装返回数据 var returnData = {}; returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回（前端发送请到后台查询数据时会发送该数据，后端查询完数据后要将改数据返回到前端） returnData.recordsTotal = result.total;//总记录数 returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果 returnData.data = result.pageData;//后端查询展示在页面中的数据 //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染 //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕 callback(returnData); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("查询失败"); } }); }, //绑定数据 columns: [ { data: "name",//字段名 orderable : false, render : function(data,type, row, meta) { if(data.state==1){ return data.value; }else if(data.state==0){ return ""; } } }, { data: "dept_name",//字段名 render : function(data,type, row, meta) { if(data.state==1){ return data.value; }else if(data.state==0){ return ""; } } }, { data : "job_name",//字段名 render : function(data,type, row, meta) { if(data.state==1){ return data.value; }else if(data.state==0){ return ""; } } }, { data : "num",//字段名 orderable : false, render : function(data,type, row, meta) { if(data.state==1){ return data.value; }else if(data.state==0){ return ""; } } }, { data : "uname",//字段名 orderable : false,//禁用排序 render : function(data,type, row, meta) { if(data.state==1){ return data.value; }else if(data.state==0){ return ""; } } }, { data: "status",//字段名 defaultContent:"",//无默认值 render : function(data,type, row, meta) { if(data.state==1){ return (data.value == 1? "入职":data.value == 2?"转正":data.value == 3?"离职":" "); }else if(data.state==0){ return ""; } } }, { data : "pdate",//字段名 render : function(data,type, row, meta) { if(data.state==1){ return data.value; }else if(data.state==0){ return ""; } } }, { data: null,//字段名 defaultContent:"",//无默认值 orderable : false,//禁用排序 } ], "createdRow": function ( row, data, index ) { //不使用render，改用jquery文档操作呈现单元格 var $opBtn = $('完善入职资料'); $('td', row).eq(7).append($opBtn); }, "drawCallback": function( settings ) { //渲染完毕后的回调 //默认选中第一行 //$("tbody tr",$table).eq(0).click(); } })).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象 //查询 $("#queryBtn").click(function(){ _table.draw(); }); //查询表单中的select框值发生变化时执行的事件 $("#deptId").change(function(){ _table.draw(); }); //按钮点击事件 $table.on("click","a[data_code='2']",function() { //点击完善入职质料按钮所执行的事件 var eid = this.getAttribute("data_eid") $("#entryFormModal").find('.modal-title').text("完善员工入职资料"); $("#entryFormModal .modal-body").load("/script/v_hr_inleaving_form.jsp?code="+2+"&eid="+eid); $("#entryFormModal").modal(); }); }); var userManage = { getQueryCondition : function(data) { var param = {}; //组装排序参数 if (data.order&&data.order.length&&data.order[0]) { switch (data.order[0].column) { case 1: param.orderColumn = "dept";//数据库列名称 break; case 2: param.orderColumn = "job";//数据库列名称 break; case 5: param.orderColumn = "iostatus";//数据库列名称 break; case 6: param.orderColumn = "pdate";//数据库列名称 break; default: param.orderColumn = "pdate";//数据库列名称 break; } //排序方式asc或者desc param.orderDir = data.order[0].dir; } param.username = $("#username").val();//查询条件 param["employee.name"]= $("#ename").val();//查询条件 param["employee.num"] = $("#num").val();//查询条件 param["employee.deptId"] = $("#deptId").val(); param["employee.jobId"] = $("#jobId").val(); param.iostatus = $("#iostatus").val(); param.minPdate = $("#minPdate").val(); param.maxPdate = $("#maxPdate").val(); //组装分页参数 param.startIndex = data.start; param.pageSize = data.length; param.draw = data.draw; return param; } };3、constant.js初始化表格的一些属性，参数值 /*常量*/ var CONSTANT = { DATA_TABLES : { DEFAULT_OPTION : { //DataTables初始化选项 language: { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "显示 _START_ 到 _END_ 条，共 _TOTAL_ 条。", "sInfoEmpty": "显示 0 到 0 条，共 0 条", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, autoWidth: false, //禁用自动调整列宽 stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 processing: false, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //禁用原生搜索 lengthChange: false,//关闭选择每页显示的数据条数 paging: true,//允许分页 info:true,//左下角信息 showing 1 to 7 of 7entries }, COLUMN: { CHECKBOX: { //复选框单元格 className: "td-checkbox", orderable: false, width: "30px", data: null, render: function (data, type, row, meta) { return ''; } } }, RENDER: { //常用render可以抽取出来，如日期时间、头像等 ELLIPSIS: function (data, type, row, meta) { data = data||""; return '' + data + ''; } } } };4、后台实现排序+分页+条件查询的代码 Controller层的代码 @RequestMapping(value = "/getEmployeeEntryInfos") public Map getEmployeeEntryInfos(EmployeeEntryInfoExample example,HttpServletRequest request) throws Exception{ //直接返回前台 String draw = request.getParameter("draw"); //获取排序字段 String orderColumn = request.getParameter("orderColumn"); if(orderColumn == null){ orderColumn = "pdate"; } example.setSortField(orderColumn); //获取排序方式 String orderDir = request.getParameter("orderDir"); if(orderDir == null){ orderDir = "asc"; } example.setSortWay(orderDir); PageList pageList = employeeEntryInfoService.pageQueryByExample(example, request); Map info = new HashMap(); info.put("pageData", pageList.getAuthData()); info.put("total", pageList.getTotalCount()); info.put("draw", draw); return info; }service层的代码 public PageList pageQueryByExample(EmployeeEntryInfoExample example, HttpServletRequest request){ //数据起始位置 String startIndex = request.getParameter("startIndex"); //每页显示的条数 String pageSize = request.getParameter("pageSize"); int totalCount = employeeEntryInfoMapper.selectCountByExample(example); //判断总人数是否为0，如果为0就返回一个空的PageList对象，不需要在到数据库查询具体的入职员工信息 if(totalCount == 0){ return new PageList(); }else{ //查询分页展示的数据 PageHelper.offsetPage((Integer.parseInt(startIndex) / Integer.parseInt(pageSize)) + 1, Integer.parseInt(pageSize)); List rows = employeeEntryInfoMapper.pageQueryByExample(example); List dataList = new ArrayList(); for (EmployeeEntryInfo employeeEntryInfo : rows) { Map list = new HashMap(); list.put("id",new AuthData("id", employeeEntryInfo.getId(), 0)); list.put("num",new AuthData("num", employeeEntryInfo.getEmployee().getNum(), 1)); list.put("name",new AuthData("name", employeeEntryInfo.getEmployee().getName(), 1)); list.put("dept_name",new AuthData("dept_name", employeeEntryInfo.getEmployee().getDept().getName(), 1)); list.put("job_name",new AuthData("job_name", employeeEntryInfo.getEmployee().getJob().getName(), 1)); list.put("uname",new AuthData("uname", employeeEntryInfo.getEmployee().getAccount().getName(), 1)); list.put("status",new AuthData("status", employeeEntryInfo.getIostatus(), 1)); list.put("pdate",new AuthData("pdate",new SimpleDateFormat("yyyy-MM-dd").format(employeeEntryInfo.getPdate()) , 1)); list.put("eid",new AuthData("eid", employeeEntryInfo.getEid(), 1)); Integer eId = (Integer) request.getSession().getAttribute(DataKey.ACCOUNT_ID.$()); list = AuthData.dataSelect(eId, list); dataList.add(list); } PageList pageList = new PageList(totalCount); pageList.setAuthData(dataList); return pageList; } }效果图：
|
【本文地址】