第一步：分页工具类
package com.smartmorse.vo;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.github.miemiedev.mybatis.paginator.domain.Order;
import com.github.miemiedev.mybatis.paginator.domain.PageBounds;
public class PageForm {
public static final String CHINESE_PINYIN = "nlssort(? ,'NLS_SORT=SCHINESE_PINYIN_M')";
private int page = 1;
private int limit = 20;
private String sort;
private Map<String,String> orderExprs = new HashMap<String, String>();
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public void addOrderExpr(String property, String expr){
this.orderExprs.put(property,expr);
}
public PageBounds toPageBounds(){
List<Order> orders = Order.formString(sort);
for (int i = 0; i < orders.size(); i++) {
Order order = orders.get(i);
if(orderExprs.get(order.getProperty()) != null){
orders.set(i, new Order(
order.getProperty(),
order.getDirection(),
orderExprs.get(order.getProperty()))
);
}
}
return new PageBounds(page, limit, orders);
}
}
第二步 应用后端代码
@Controller
@RequestMapping("/membercheck")
public class MemberCheckController {
@Autowired
MemberCheckService memberCheckService;
@SystemControllerLog(description = "签到(退)列表")
@RequestMapping(value = "/list", method = RequestMethod.GET)
public String list(HttpServletRequest request, Model model, PageForm pageForm, MemberCheckVo memberCheck){
String dcode = (String) request .getSession().getAttribute("dcode");
memberCheck.setDistrictCode(dcode);
StringBuffer searchstr = new StringBuffer();//传参解决分页异常
if(StringUtil.isNotNull(memberCheck.getDistrictCode())){
searchstr.append("&districtCode="+memberCheck.getDistrictCode());
}
if(StringUtil.isNotNull(memberCheck.getMemberName())){
searchstr.append("&memberName="+memberCheck.getMemberName());
}
if(StringUtil.isNotNull(memberCheck.getCheckInStartDate())){
searchstr.append("&checkInStartDate="+memberCheck.getCheckInStartDate());
}
if(StringUtil.isNotNull(memberCheck.getCheckInEndDate())){
searchstr.append("&checkInEndDate="+memberCheck.getCheckInEndDate());
}
if(StringUtil.isNotNull(memberCheck.getCheckOutEndDate())){
searchstr.append("&checkOutEndDate="+memberCheck.getCheckOutEndDate());
}
if(StringUtil.isNotNull(memberCheck.getCheckOutStartDate())){
searchstr.append("&checkOutStartDate="+memberCheck.getCheckOutStartDate());
}
if(StringUtil.isNotNull(memberCheck.getStatus())){
searchstr.append("&status="+memberCheck.getStatus());
}
model.addAttribute("searchstr", searchstr);
model.addAttribute("memberCheck",memberCheck);
model.addAttribute("list", memberCheckService.selectByPage(memberCheck,pageForm.toPageBounds()));
return "membercheck/list";
}
}
第三步 前端应用
<%@page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="${assetsctx }/js/page/jqPaginator.min.js"
type="text/javascript"></script>
<link href="${assetsctx }/css/page/myPage.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="${assetsctx }js/layer/layer.js"></script>
<script type="text/javascript" src="${assetsctx }js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-heading">
<div class="col-sm-12">
<h1 class="page-header">签到(退)列表</h1>
</div>
</div>
<div class="panel-body">
<div class="text-left">
<form id="selectForm" class="form-inline" role="form" action="" method="get">
<div class="row col-sm-10">
<div class="row col-sm-12">
<div class="form-group" >
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">签到时间</div>
<input class="form-control" name="checkInStartDate" type="text"
placeholder="开始时间" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
readonly="readonly"
value="${memberCheck.checkInStartDate }">
<div class="input-group-addon">至</div>
<input class="form-control" name="checkInEndDate" type="text"
placeholder="结束时间" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
readonly="readonly"
value="${memberCheck.checkInEndDate }">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">签退时间</div>
<input class="form-control" name="checkOutStartDate" type="text"
placeholder="开始时间" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
readonly="readonly"
value="${memberCheck.checkOutStartDate }">
<div class="input-group-addon">至</div>
<input class="form-control" name="checkOutEndDate" type="text"
placeholder="结束时间" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
readonly="readonly"
value="${memberCheck.checkOutEndDate }">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon" style="60px;">操作员姓名</div>
<input class="form-control" name="memberName" type="text"
placeholder=""
value="${memberCheck.memberName }">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon" style="60px;">状态</div>
<select name="status" class="form-control">
<option value="">全部</option>
<option value="WQD" <c:if test="${memberCheck.status=='WQD' }">selected</c:if> >未签到</option>
<option value="YQD" <c:if test="${memberCheck.status=='YQD' }">selected</c:if> >已签到</option>
<option value="YQT" <c:if test="${memberCheck.status=='YQT' }">selected</c:if> >已签退</option>
</select>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">筛选</button>
<button class="btn btn-danger" type="button" onclick="emptyForm();">重置</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row col-sm-12">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover"
id="dataTables-example">
<thead>
<tr>
<th>会员名称</th>
<th>pos编号</th>
<th>打卡日期</th>
<th>签到时间</th>
<th>签退时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<c:forEach var="item" items="${list}">
<tr class="id" value="${item.id }">
<td>${item.memberName }</td>
<td>${item.posNo }</td>
<td><fmt:formatDate value="${item.checkDate }" type="time" pattern="yyyy-MM-dd"/></td>
<td><fmt:formatDate value="${item.checkIn }" type="time" pattern="yyyy-MM-dd HH:mm:ss"/></td>
<td><fmt:formatDate value="${item.checkOut }" type="time" pattern="yyyy-MM-dd HH:mm:ss"/></td>
<td>
<c:if test="${item.status == 'WQD'}">未签到</c:if>
<c:if test="${item.status == 'YQD'}">已签到</c:if>
<c:if test="${item.status == 'YQT'}">已签退</c:if>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="col-sm-12 text-center">
<ul class="pagination" id="pagination"></ul>
<!-- 总条数 -->
<input type="hidden" id="PageCount" runat="server"
value="${listPaginator.totalCount}" />
<!-- 总页数 -->
<input type="hidden" id="countindex" runat="server"
value="${listPaginator.totalPages}" />
<!-- 当前第几页 -->
<input type="hidden" id="Pagedq" runat="server"
value="${listPaginator.page}" />
<!-- 请求的地址 -->
<input type="hidden" id="pageUrl" runat="server"
value="${ctx }/membercheck/list" />
<!-- 请求的参数 -->
<input type="hidden" id="pageParameter" runat="server"
value="${searchstr}" />//解决异常
<!--设置最多显示的页码数 可以手动设置 默认为7-->
<input type="hidden" id="visiblePages" runat="server" value="10" />
</div>
<script src="${assetsctx }/js/page/myPage.js"
type="text/javascript"></script>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="${assetsctx}themes/classic/base/js/app.js"></script>
<script type="text/javascript">
//清空表单
function emptyForm(){
$('input','#selectForm')
.not(':button, :submit, :reset, :hidden')
.val('');
$('option','#selectForm')
.removeAttr('selected');
}
</script>
</body>
</html>
js文件
function exeData(num, type) {
loadpage();
}
function loadpage() {
var myPageCount = parseInt($("#PageCount").val());
var countindex = parseInt($("#countindex").val());
var pageUrl=$("#pageUrl").val()+"?page=";
var pageParameter=$("#pageParameter").val();
var Pagedq=$("#Pagedq").val();
$.jqPaginator('#pagination', {
totalPages: parseInt($("#countindex").val()),
visiblePages: parseInt($("#visiblePages").val()),
currentPage: parseInt($("#Pagedq").val()),
first: '<li class="first"><a href="javascript:;">首页</a></li>',
prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>上一页</a></li>',
next: '<li class="next"><a href="javascript:;">下一页<i class="arrow arrow3"></i></a></li>',
last: '<li class="last"><a href="javascript:;">末页</a></li>',
page: '<li class="page"><a href="'+pageUrl+'{{page}}'+pageParameter+'">{{page}}</a></li>',
onPageChange: function (num, type) {
if (type == "change") {
exeData(num, type);
location.href=pageUrl+num+pageParameter;
}
}
});
$("#pagination").append("<li><span>共"+myPageCount+"条/共"+countindex+"页</span></li>");
}
$(function () {
loadpage();
});