導入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>
