第一步：分页工具类

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="width: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="width: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();

});

　　

最新文章

  1. Atitit.软件开发的几大规则，法则，与原则Principle v3
  2. jQuery get() 函数
  3. CSS笔记（十）position属性与定位
  4. Java Ant build.xml详解
  5. 解决maven Generating project in Interactive mode卡死问题（转）
  6. android fragment getActivity()为空的另一个可能
  7. 高效实现 std::string split() API
  8. HTML5 Canvas图像放大、移动实例1
  9. 原生js和jquery实现图片轮播特效
  10. node.js 入门教程（beginnder guide
  11. HTTP认证
  12. JavaScript 加号运算符详解
  13. Thinkphp3.2结合phpqrcode生成二维码（含Logo的二维码），附案例
  14. PHP拓展配置redis、phalcon
  15. 利用PowerUpSQL攻击SQL Server实例
  16. org.springframework.beans.factory.BeanCreationException: Error creating bean with name &#39;redisConnectionFactory&#39; defined in class path resource
  17. js中setTimeout() 时间参数为0
  18. [INS-40724] No locally defined network interface matches the SCAN subnet.
  19. [js]jquery里的jsonp实现ajax异源请求
  20. &lt;构建之法&gt;8,9,10章的读后感

热门文章

  1. linux shell assemble PDF文件
  2. selenium,webdriver爬取斗鱼主播信息 实操
  3. mac bash上显示git分支与状态
  4. __str__和__repr__的区别
  5. 教你如何创建vue环境
  6. go语言从例子开始之Example7.switch分支结构
  7. ［几何］计算不规则多边形的面积、中心、重心（Android，转）
  8. （PASS）PLSQL激活
  9. jq的ajax请求更改为axios请求时零碎总结
  10. Qt + VS【无法打开xxx文件】