layui前端框架之分页
发布时间:2020-12-15 07:10:31 所属栏目:Java 来源:网络整理
导读:框架环境:SSM框架 为了保证效果,此次演示也用到了jQuery ui框架,大家最好也引入进来 一、去layui官网下载包,解压后,然后导入文件中,最好放再main/webapp文件夹下 官网地址如下:http://www.layui.com/ ? ? 二、新建实体类 package cn.pms.model; import
框架环境:SSM框架 为了保证效果,此次演示也用到了jQuery ui框架,大家最好也引入进来 一、去layui官网下载包,解压后,然后导入文件中,最好放再main/webapp文件夹下 官网地址如下:http://www.layui.com/ ? ? 二、新建实体类 package cn.pms.model; import java.util.Date; public class Employee { /** 工号*/ private String employeeNo; /** Integer id; 姓名 String employeeName; String departmentNo; 性别 String sex; String idnumber; String entrydate; String bornday; String telnumber; String address; 岗位 String post; 中专大专本科研究生硕士博士其他 String education; 职位 String position; 打扫指标 String cleanIndex; 是否打扫员 String iscleaner; 是否业务员 String isclerk; 状态在职离职 String status; public String getEmployeeNo() { return employeeNo; } void setEmployeeNo(String employeeNo) { this.employeeNo = employeeNo == null ? null : employeeNo.trim(); } Integer getId() { id; } setId(Integer id) { this.id = String getEmployeeName() { employeeName; } setEmployeeName(String employeeName) { this.employeeName = employeeName == : employeeName.trim(); } String getDepartmentNo() { departmentNo; } setDepartmentNo(String departmentNo) { this.departmentNo = departmentNo == : departmentNo.trim(); } String getSex() { sex; } setSex(String sex) { this.sex = sex == : sex.trim(); } String getIdnumber() { idnumber; } setIdnumber(String idnumber) { this.idnumber = idnumber == : idnumber.trim(); } String getTelnumber() { telnumber; } setTelnumber(String telnumber) { this.telnumber = telnumber == : telnumber.trim(); } String getAddress() { address; } setAddress(String address) { this.address = address == : address.trim(); } String getPost() { post; } setPost(String post) { this.post = post == : post.trim(); } String getEducation() { education; } setEducation(String education) { this.education = education == : education.trim(); } String getPosition() { position; } setPosition(String position) { this.position = position == : position.trim(); } String getCleanIndex() { cleanIndex; } setCleanIndex(String cleanIndex) { this.cleanIndex = cleanIndex == : cleanIndex.trim(); } String getStatus() { status; } setStatus(String status) { this.status = status == : status.trim(); } String getEntrydate() { entrydate; } setEntrydate(String entrydate) { this.entrydate = String getBornday() { bornday; } setBornday(String bornday) { this.bornday = String getIscleaner() { iscleaner; } setIscleaner(String iscleaner) { this.iscleaner = String getIsclerk() { isclerk; } setIsclerk(String isclerk) { this.isclerk = isclerk; } @Override String toString() { return "Employee [employeeNo=" + employeeNo + ",id=" + id + ",employeeName=" + employeeName + ",departmentNo=" + departmentNo + ",sex=" + sex + ",idnumber=" + idnumber + ",entrydate=" + entrydate + ",bornday=" + bornday + ",telnumber=" + telnumber + ",address=" + address + ",post=" + post + ",education=" + education + ",position=" + position + ",cleanIndex=" + cleanIndex + ",iscleaner=" + iscleaner + ",isclerk=" + isclerk + ",status=" + status + "]"; } } ? 二、写mapper类和对应的xml cn.pms.mapper; java.util.List; java.util.Map; org.apache.ibatis.annotations.Param; cn.pms.model.AppAccount; cn.pms.model.Employee; * 员工接口 * @author youcong * */ interface EmployeeMapper { public List<Employee> selectAllEmployee(Map<String,Object> paramMap);//查询所有用员工分页查询 int selectEmployeePageCount(Map<String,1)">查询所有员工总数 } ? <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="cn.pms.mapper.EmployeeMapper" resultMap type="Employee" id="employees"> id column="employee_no" property="employeeNo" jdbcType="VARCHAR" /> result ="id"="INTEGER" ="employee_name"="employeeName"="department_no"="departmentNo"="sex"="idnumber"="entrydate"="bornday"="telnumber"="address"="post"="education"="position"="clean_index"="cleanIndex"="iscleaner"="isclerk"="status"/> </resultMap> select id="selectAllEmployee" resultMap> select * from `employee` where> if test="queryText != null" and employeeName like concat('%',#{queryText},'%') if> order by id desc limit #{start},#{size} select> ="selectEmployeePageCount" resultType="int" select count(*) from `employee` > > mapper> ? 三、对应的service和service实现类 cn.pms.service; * 员工业务接口 * eluzhu * EmployeeService { 查询所有员工总数 } ? cn.pms.service.impl; org.springframework.beans.factory.annotation.Autowired; org.springframework.stereotype.Service; cn.pms.mapper.EmployeeMapper; cn.pms.model.Employee; cn.pms.service.EmployeeService; * 员工业务接口实现类 * youcong * * */ @Service class EmployeeServiceImpl implements EmployeeService{ @Autowired EmployeeMapper employeeMapper; @Override paramMap) { TODO Auto-generated method stub employeeMapper.selectAllEmployee(paramMap); } @Override employeeMapper.selectEmployeePageCount(paramMap); } } ? 四、Controller和AJAXResult类 AJAXResult { private boolean success; 返回码 String returnCode; 返回信息 String returnMsg; 返回数据 Object data; isSuccess() { success; } void setSuccess( success) { this.success = String getReturnCode() { returnCode; } setReturnCode(String returnCode) { this.returnCode = String getReturnMsg() { returnMsg; } setReturnMsg(String returnMsg) { this.returnMsg = Object getData() { data; } setData(Object data) { this.data = data; } } ? ? ? cn.pms.controller; java.io.IOException; java.io.PrintWriter; java.util.HashMap; javax.servlet.http.HttpServletRequest; javax.servlet.http.HttpServletResponse; org.springframework.stereotype.Controller; org.springframework.ui.Model; org.springframework.web.bind.annotation.RequestBody; org.springframework.web.bind.annotation.RequestMapping; org.springframework.web.bind.annotation.RequestMethod; org.springframework.web.bind.annotation.ResponseBody; com.alibaba.fastjson.JSON; com.alibaba.fastjson.JSONObject; cn.pms.model.AJAXResult; cn.pms.model.Department; cn.pms.model.Hotel; cn.pms.model.Page; cn.pms.service.DepartmentService; * 員工信息管理 * * @Controller EmployeeController { @Autowired EmployeeService employeeService; * 查询所有员工,主要用于分页查询 @RequestMapping(value="/queryEmployee",method = RequestMethod.POST,produces = "application/json;charset=utf-8") @ResponseBody Object queryEmployee(HttpServletRequest request) { AJAXResult result = new AJAXResult(); String pages = request.getParameter("pagesize"); System.out.println("queryEmployee ==== pages : " + pages); 查询条件 String queryText = request.getParameter("queryText"); System.out.println("queryEmployee ==== queryText : " + queryText); String pagen = request.getParameter("pageno"); System.out.println("queryEmployee ==== pagen : " + pagen); 当前页 Integer pageno = Integer.parseInt(pagen.trim()); 每页的数量 Integer pagesize = Integer.parseInt(pages.trim()); Map<String,Object> paramMap = new HashMap<String,1)">(); 检验查询参数 if ( queryText != ) { if ( queryText.indexOf("") != -1 ) { queryText = queryText.replaceAll("\","\\"); } if ( queryText.indexOf("%") != -1 ) { queryText = queryText.replaceAll("%","\%"if ( queryText.indexOf("_") != -1 ) { queryText = queryText.replaceAll("_","\_"); } } if(queryText != null && queryText != "") { queryText = queryText.trim(); } paramMap.put("queryText",queryText); paramMap.put("size" pagesize); try { 查询现有的用户 List<Employee> e_list = employeeService.selectAllEmployee(paramMap); 查询用户数量 int count = employeeService.selectEmployeePageCount(paramMap); System.out.println("用户数量 = : " + count); int totalno = 0; if ( count % pagesize == 0 ) { totalno = count / pagesize; } else { totalno = count / pagesize + 1; } Page<Employee> ePage = new Page<>(); ePage.setDatas(e_list); ePage.setTotalno(totalno); ePage.setTotalsize(count); 查询数据库成功,返回成功码 result.setData(ePage); result.setSuccess(true); result.setReturnCode("000000"); result.setReturnMsg("success"); result; } catch (Exception e) { e.printStackTrace(); 查询数据库失败,返回失败码 result.setReturnCode("222221"); result.setReturnMsg("error"); result; } } } ? 五、jsp页面代码 <%@ page language="java contentTypetext/html; charset=UTF-8 pageEncodingUTF-8"%> @taglib prefixc urihttp://java.sun.com/jsp/jstl/core%> DOCTYPE htmlhtml xmlns="http://www.w3.org/1999/xhtml"head> <% String path request.getContextPath(); %> meta http-equiv="Content-Type" content="text/html; charset=utf-8" title>e路住酒店管理平台link href="<%=path%>/css/main.css" type="text/css" rel="stylesheet"rel="stylesheet" href="<%=path%>/layui/css/layui.css" media="all"script src="<%=path%>/js/easyui/jquery-1.8.0.min.js" type="text/javascript"></script="<%=path%>/layui/layui.js" charset="utf-8"="<%=path%>/js/layer/layer-v3.1.1/layer/mobile/layer.js"="<%=path%>/css/jquery-ui-1.10.4.custom.css" ="<%=path%>/js/jquery-ui-1.10.4.custom.js"="<%=path%>/js/jquery-ui-1.10.4.custom.min.js"> var condflg = false; $(function () { //弹框 员工信息添加 $(.man_add).dialog({ autoOpen : 500600true.man_opener1).button().click(() { $().dialog(open); }); $(.man_add2日期选择 .datepicker).datepicker({ changeMonth : }); $(.man_opener2() { 有待处理补充 }); 页数判断 <c:if test${empty param.pageno}> pageQuery(1); /c:if> ${not empty param.pageno} pageQuery(${param.pageno}); c:if> $(#queryBtn).click((){ queryText $(#queryText).val(); ( queryText == "" ) { pageQuery(); } else { condflg ; pageQuery(); } }); }); 装变量的容器,可以使用多个分页器 dataObj { page_enterprise : 选择每页显示的数据条数 limit_enterprise: 2203040 } pageQuery(pageno) { jsonData { pageno : pageno,1)">pagesize : dataObj.limit_enterprise } ( condflg ) { jsonData.queryText ).val(); } $.ajax({ url : /ssm_pms/queryEmployeePOSTcontentType: 'application/json;charset=utf-8', data : jsonData,dataType : 'json(result){ condflg ; (result.returnCode 000000" && result.returnMsg success){ alert("result.returnCode" + result.returnCode); appPage result.data; apps result.data.datas; startAllAppoint pageno;当前页数 alert("当前页数" + startAllAppoint) dataLength result.data.totalsize;数据总条数 alert("数据总条数" + dataLength); alert("apps ==== " + apps); appRows ; $.each(apps,1)">(i,app){ appRows + <tr>; appRows <td>+app.employeeNo </td>app.employeeNameapp.sexapp.departmentNoapp.entrydate; appRows app.idnumberapp.telnumberapp.postapp.positionapp.isclerkapp.iscleanerapp.cleanIndexapp.status </span><a href='#' onclick='editEmployeeInfo( app.id + app.employeeNo ",1)"> app.sex app.departmentNo app.entrydate app.telnumber app.post app.position app.cleanIndex app.isclerk app.iscleaner app.status; appRows <a href='#' onclick='Del("")'><button class='man_opener'>删除</button></a> </td></tr>; }); $(#appAccount_list).html(appRows); 调用分页 layui.use([laypagelayer],1)">() { laypage layui.laypage,layer layui.layer; laypage.render({ elem: enterpriSEOrder首页尾页countprevpagenextlimitskip#00A0E9(obj,first){ (!first) { ***第一次不执行,一定要记住,这个必须有,要不然就是死循环 curr obj.curr; 更改存储变量容器中的数据,是之随之更新数据 dataObj.page_enterprise obj.curr; dataObj.limit_enterprise obj.limit; 回调该展示数据的方法,数据展示 pageQuery(curr); } } }); }); }{ layer.msg(失败200056}); } } }); } appAccountData(data) { alert("fillData...." + data); for ( i 0; i data.length; i++) { tr ; alert(data.length); (data[i].employeeNo "" || data[i].employeeNo == undefined) { alert(data[i].nickName); tr += <td> </td>; } { tr <td>; } (data[i].employeeName data[i].employeeName undefined) { tr ; } tr += "<td>" + data.appAccount[i].memberId + "</td>"; (data[i].sex data[i].sex (data[i].departmentNo data[i].departmentNo { tr ; } (data[i].entrydate data[i].entrydate ; } (data[i].idnumber data[i].idnumber (data[i].telnumber data[i].telnumber (data[i].post data[i].post (data[i].position data[i].position (data[i].isclerk data[i].isclerk (data[i].iscleaner data[i].iscleaner (data[i].cleanIndex data[i].cleanIndex (data[i].status data[i].status ; } tr ; $().append($(tr)); } } 删除 Del(employeeNo){ bconfirm(你确定要将该员工信息删除?(b){ $.ajax({ type:${pageContext.request.contextPath}/deleteEmployeeInfoemployeeNo:employeeNo},success:(data){ alert(成功删除); window.location.href/ssm_pms/pages/Set/salesMan.jsp; } }); }{ alert(取消删除); } } 添加用户 添加员工信息 AddEmployee(){ employeeNo$(#employeeNo).val(); 员工名 employeeName#employeeName).val(); 性别 sex#sex部门号 departmentNo#departmentNo身份证号码 idnumber#idnumber入职日期 entrydate#entrydate出生日期 bornday#bornday电话号码 telnumber#telnumber地址 address#address学历 education#education岗位 post#post职位 position#position打扫指标 cleanIndex#cleanIndex是否是业务员 isclerk.isclerk是否是清洁员 iscleaner.iscleaner状态 status.status).val(); data { employeeNo : employeeNo,employeeName : employeeName,sex : sex,departmentNo : departmentNo,idnumber : idnumber,entrydate : entrydate,bornday : bornday,telnumber : telnumber,address : address,education : education,post : post,position : position,cleanIndex : cleanIndex,isclerk : isclerk,iscleaner:iscleaner,status : status } $.ajax({ url:${pageContext.request.contextPath}/insertEmployeeInfoapplication/json;charset=utf-8(result){ alert(成功添加員工信息; },1)"> }); } 编辑用户 编辑员工信息 editEmployeeInfo(id,employeeNo,employeeName,sex,departmentNo,entryDate,idnumber,telnumber,post,position,cleanIndex,isclerk,iscleaner,status){ alert(isclerk); $(#id_edit).val(id); $(#employeeNo_edit).val(employeeNo); $(#employeeName_edit).val(employeeName); $(#sex_edit).val(sex); $(#idnumber_edit).val(idnumber); $(#entryDate_edit).val(entryDate); $(#telnumber_edit).val(telnumber); $(#post_edit).val(post); $(#position_edit).val(position); $(.isclerk_edit).val(isclerk); $(#cleanIndex_edit).val(cleanIndex); $(.iscleaner_edit).val(iscleaner); $(.status_edit).val(status); $(); } 修改員工信息 updateEmployeeInfo(){ id).val(); #departmentNo_edit).val(); alert(cleanIndex); { id : id,employeeNo : employeeNo,status : status } $.ajax({ url : ${pageContext.request.contextPath}/updateEmployeeInfo(result){ ){ alert(修改成功); window.location.href ; }{ alert(修改失败); } } }); } bodydiv ="main" style="width: 98%;"h1 ="itset">员工管理h1="search_goods"> label>业务员:> ="IsSalesMan"> option value="">全部option="1">是="0">否>状态:="Status">在职>离职input ="txtKey"="text" placeholder="工号/名称/拼音码" /> input ="button"="queryBtn" value="查询" class="bus_search" /> div> table cellpadding="0" cellspacing="account"theadtr> th>工号>姓名>性别>部门th style="display: none;">出生日期>入职日期>身份证号>学历>手机号码>电话>岗位>职位>业务员>打扫员>打扫指标>状态>操作tbody ="appAccount_list"tbodytfoottd colspan="20" align="center"> ul ="pagination"ultdtable> > ="hotel_db"="fl"="添加员工"="man_opener1" > <!-- 分页器 --> ="pagePicker"自定义的分页器--> ="enterpriSEOrder"> 新增員工信息 ="man_add"> 弹出窗口--> ="pop"="line">添加员工="errortips"="btnRead" style="float: left; font-size: 12px; width: 530px; overflow: hidden"form ="form-group"="as"li><b ="color: red; margin-right: 5px;">*b>工号:input maxlength="10" required="required" span ="info1" style="color: red; font-size: 8px;" span>姓名: required/></>性别:="sex"> ="男">男="女">女>部门:="departmentNo">清洁部 <li><label>拼音码:</label><input type="text" id="PYM" maxlength="25" /></li> --> >身份证号:="18" id="idnumber" >入职日期:="datepicker"="entrydate" >手机号:="11">学历:="education">中专="2">大专="3">本科="4">研究生="5">硕士="6">博士="7">其他>岗位: maxlength="10" >职位:> >打扫指标:="5" ="radio" class="isclerk radio" name="IsSalesman" checked="checked" value="1" /> p name="0" >打扫员:="iscleaner radio"="IsClean"="status radio"="Status" <li id="liCleanerPassword" style="display: none;"><label>打扫员密码:</label> <input type="password" value="" id="CleanerPassword" name="CleanerPassword" /></li> li ="margin: 30px 0px 10px 230px; margin-left: 220px;"> <input type="button" value="确认" class="bus_add" id="BtnAdd" /> <input type="button" value="关闭" class="bus_dell" id="BtnDel" /> --> ="submit"="确认" onclick="AddEmployee()" /> form> 编辑员工信息 --> ="man_add2">编辑员工="display:none;"="id_edit"="10" ="color: red; font-size: 8px;"> ="employeeNo_edit"="employeeName_edit"="sex_edit"> ="departmentNo_edit"> ="entryDate_edit" > ="idnumber_edit" > ="telnumber_edit"="11" > ="post_edit"="position_edit"="cleanIndex_edit"="isclerk_edit radio"="iscleaner_edit radio"="status_edit radio"="liCleanerPassword">打扫员密码:="password"=""="CleanerPassword"="CleanerPassword" ="updateEmployeeInfo()" /> > > html> ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容