导入kkpager的js文件及css文件
下载地址
前端页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>考勤管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/font.css">
<link rel="stylesheet" href="css/xadmin.css">
<link rel="stylesheet" href="css/kkpager_orange.css">
<script type="text/javascript"
src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="js/xadmin.js"></script>
<script type="text/javascript" src="js/kkpager.min.js"></script>
<!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="x-nav">
<span class="layui-breadcrumb"> <a>员工管理</a> <a> <cite>考勤管理</cite></a>
</span> <a class="layui-btn layui-btn-small"
style="line-height: 1.6em; margin-top: 3px; float: right"
href="javascript:location.replace(location.href);" title="刷新"> <i
class="layui-icon" style="line-height: 30px">ဂ</i></a>
</div>
<div class="x-body">
<div class="layui-row">
<form class="layui-form layui-col-md12 x-so">
<div class="layui-input-inline">
<span>快速查询:</span>
<input style="display: none;" type="text" class="layui-input" placeholder="请输入工号" id="staffId">
<input style="display: none;" type="text" name="username" placeholder="请输入姓名"
autocomplete="off" class="layui-input" id="staffName">
<input type="date" class="layui-input" id="startDate">至
<input type="date" class="layui-input" id="endDate">
</div>
<div class="layui-input-inline">
<select id="signinState">
<option value=0>- - - - - - -状态不限- - - - - - -</option>
<option value="正常">正常</option>
<option value="迟到">迟到</option>
<option value="早退">早退</option>
<option value="迟到早退">迟到早退</option>
<option value="未签退">未签退</option>
<option value="旷工">旷工</option>
<option value="请假">请假</option>
</select>
</div>
<button class="layui-btn" type="button" "search()">
<i class="layui-icon"></i>
</button>
</form>
</div>
<xblock>
<span class="x-right" style="line-height: 40px" id="count"></span> </xblock>
<table class="layui-table" style="text-align: center;">
<thead>
<tr>
<th style="text-align: center;width: 10%;">序号</th>
<th style="text-align: center;width: 10%;">工号</th>
<th style="text-align: center;width: 10%;">姓名</th>
<th style="text-align: center;width: 30%;">签到时间</th>
<th style="text-align: center;width: 30%;">签退时间</th>
<th style="text-align: center;width: 10%;">状态</th>
</tr>
</thead>
<tbody id="tableData">
<!-- 数据示例 -->
<!-- end 数据示例 -->
</tbody>
</table>
<!-- 分页部分 -->
<font color="red" id="tip"></font>
<div id="kkpager"></div>
<!-- end 分页 -->
</div>
</body>
<script type="text/javascript">
//获取地址栏上的参数值
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
}
//页面加载完成后判断地址上是否有参数
$(function() {
var nowId = "${staff.staffId}";
var departIds = "${staff.staffDepartId}";
if (departIds == 1 || departIds == 6) {
$("#staffId").show();
$("#staffName").show();
} else {
$("#staffId").hide();
$("#staffName").hide();
}
$("#staffId").val(nowId);
var condition = "{staffId:"+nowId + ",staffName:'null',startDate:'null',endDate:'null',signinState:'null'}";
if (getQueryString("condition") != null) {
condition = getQueryString("condition");
//刷新后回填数据
var data1 = condition.replace("(","{");
var data2 = data1.replace(")","}");
var datas = eval("(" + data2 + ")");
if (datas.staffId != 'null') {
$("#staffId").val(datas.staffId);
} else {
$("#staffId").val("");
}
if (datas.staffName != 'null') {
$("#staffName").val(datas.staffName);
}
if (datas.startDate != 'null') {
$("#startDate").val(datas.startDate);
}
if (datas.endDate != 'null') {
$("#endDate").val(datas.endDate);
}
if (datas.signinState != 'null') {
$("#signinState").find("option").each(function(){
if ($(this).val() == datas.signinState) {
$(this).prop("selected","selected");
}
})
}
}
//展示第一页的数据
showPage(1,condition);
//初始化分页条:只可初始化一次
initKKpager(condition);
})
//展示数据方法
function showPage(n,condition) {
$.ajax({
type:"POST",
url:"signinController/getPageContent.do",
dataType:"text",
data:{
n:n,
condition:condition
},
success:function(result) {
if (result == "NO_RESULT") {
$("#tip").text("未查询到数据!");
} else {
$("#tip").text("");
var data = eval("(" + result + ")");
var htm = "";
for (var i = 0; i < data.length; i++) {
var index = i+1;
htm += "<tr>";
htm += "<td>" + index + "</td>";
htm += "<td>" + data[i].signinStaffId + "</td>";
htm += "<td>" + data[i].signinStaffName + "</td>";
htm += "<td>" + data[i].signinInTime + "</td>";
htm += "<td>" + data[i].signinOutTime + "</td>";
htm += "<td>" + data[i].signinState + "</td>";
htm += "</tr>";
}
$("#tableData").html(htm);
}
},
error:function() {
layer.alert("登录超时,请重新登录后进行操作!");
}
})
}
//初始化分页栏
function initKKpager(condition) {
$.ajax({
type:"POST",
url:"signinController/getPageData.do",
dataType:"text",
data:{
condition:condition
},
success:function(result) {
var data = eval("("+result+")");
$("#count").text("共有数据:" + data.count + " 条")
kkpager.generPageHtml({
//当前页码
pno : '1',
//设置为click模式
mode : 'click',
//总页码
total : data.pages,
//总数据条数
totalRecords : data.count,
//点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
//适用于不刷新页面,比如ajax
click : function(n) {
//这里可以做自已的处理
showPage(n,condition);
//处理完后可以手动调用selectPage进行页码选中切换
this.selectPage(n);
},
//getHref是在click模式下链接算法,一般不需要配置,默认代码如下
getHref : function(n) {
return '#';
}
});
},
error:function() {
layer.alert("登录超时,请重新登录后进行操作!");
}
})
}
//查询按钮
function search() {
var condition = "(a:1";
//可添加多个查询参数
var staffId = $("#staffId").val().trim();
if (staffId != "") {
condition += ",staffId:" + "'" + staffId + "'";
} else {
condition += ",staffId:" + "'null'";
}
//继续添加
var staffName = $("#staffName").val().trim();
if (staffName != "") {
condition += ",staffName:" + "'" + staffName + "'";
} else {
condition += ",staffName:" + "'null'";
}
//继续添加
var startDate = $("#startDate").val().trim();
if (startDate != "") {
condition += ",startDate:" + "'" + startDate + "'";
} else {
condition += ",startDate:" + "'null'";
}
//继续添加
var endDate = $("#endDate").val().trim();
if (endDate != "") {
condition += ",endDate:" + "'" + endDate + "'";
} else {
condition += ",endDate:" + "'null'";
}
//继续添加
var signinState = $("#signinState").val();
if (signinState != 0) {
condition += ",signinState:" + "'" + signinState + "'";
} else {
condition += ",signinState:" + "'null'";
}
condition += ")";
window.location.href = "signinController/enterSigninList.do?condition=" + condition;
}
</script>
</html>
后端页面
//控制层
//获取某一页考勤内容
@RequestMapping(value = "/getPageContent.do",produces="text/html;charset=UTF-8")
@ResponseBody
public String getPageContent(HttpServletRequest request) {
return signinService.getPageContent(request);
}
//获取分页栏数据
@RequestMapping(value = "/getPageData.do",produces="text/html;charset=UTF-8")
@ResponseBody
public String getPageData(HttpServletRequest request) {
return signinService.getPageData(request);
}
//业务层
@Override
public String getPageContent(HttpServletRequest request) {
//获取前一天的日期
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date();
Calendar calendar = Calendar.getInstance();
calendar.setTime(date);
calendar.add(Calendar.DAY_OF_MONTH, -1);
date = calendar.getTime();
String dateStr = df.format(date).split(" ")[0];
//获取地址栏的参数
String condition = request.getParameter("condition");
String condition2 = condition.replace('(', '{');
String condition3 = condition2.replace(')', '}');
Map<String, Object> map = gson.fromJson(condition3, new TypeToken<Map<String, Object>>() {}.getType());
map.put("maxDate", dateStr);
int start = (Integer.parseInt(request.getParameter("n")) - 1) * PAGE_SIZE;
int end = PAGE_SIZE;
map.put("start",start);
map.put("end",end);
List<SigninRecord> records = signinMapper.getPageContent(map);
if (records.size() == 0) {
return NO_RESULT;
}
String result = gson.toJson(records);
return result;
}
@Override
public String getPageData(HttpServletRequest request) {
//获取前一天的日期
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date();
Calendar calendar = Calendar.getInstance();
calendar.setTime(date);
calendar.add(Calendar.DAY_OF_MONTH, -1);
date = calendar.getTime();
String dateStr = df.format(date).split(" ")[0];
//获取地址栏的参数
String condition = request.getParameter("condition");
String condition2 = condition.replace('(', '{');
String condition3 = condition2.replace(')', '}');
Map<String, Object> map = gson.fromJson(condition3, new TypeToken<Map<String, Object>>() {}.getType());
map.put("maxDate", dateStr);
Integer count = signinMapper.getPageData(map);
Integer pages = (int)Math.ceil(count*1.0/PAGE_SIZE);
String data = "{count:\""+count.toString() + "\",pages:\""+pages.toString()+"\"}";
return data;
}
//mapper.xml
<select id="getPageContent" parameterType="java.util.Map" resultMap="signinRecord">
select * from sys_staff,sys_signin where sys_staff.staff_id = sys_signin.signin_staff_id and sys_signin.signin_in_time <= concat(#{maxDate}," 23:59:59")
<if test="staffId != 'null' ">
and sys_signin.signin_staff_id = #{staffId}
</if>
<if test="staffName != 'null' ">
and sys_staff.staff_name like concat("%",#{staffName},"%")
</if>
<if test="startDate != 'null' ">
and sys_signin.signin_in_time >= concat(#{startDate}," 00:00:00")
</if>
<if test="endDate != 'null' ">
and sys_signin.signin_in_time <= concat(#{endDate}," 23:59:59")
</if>
<if test="signinState != 'null' ">
and sys_signin.signin_state = #{signinState}
</if>
limit #{start},#{end}
</select>
<select id="getPageData" parameterType="java.util.Map" resultType="Integer">
select count(*) from sys_staff,sys_signin where sys_staff.staff_id = sys_signin.signin_staff_id and sys_signin.signin_in_time <= concat(#{maxDate}," 23:59:59")
<if test="staffId != 'null' ">
and sys_signin.signin_staff_id = #{staffId}
</if>
<if test="staffName != 'null' ">
and sys_staff.staff_name like concat("%",#{staffName},"%")
</if>
<if test="startDate != 'null' ">
and sys_signin.signin_in_time >= concat(#{startDate}," 00:00:00")
</if>
<if test="endDate != 'null' ">
and sys_signin.signin_in_time <= concat(#{endDate}," 23:59:59")
</if>
<if test="signinState != 'null' ">
and sys_signin.signin_state = #{signinState}
</if>
</select>