加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > Java > 正文

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>&nbsp;</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>

?

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读