版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34775102/article/details/81386591
jsp:
<%@ page language="java" import="java.util.*"
contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<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, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="${root}/resource/layuiAdmin/src/layuiadmin/layui/css/layui.css" media="all">
<script src="${root}/resource/js/jquery-1.11.0.min.js"></script>
<script src="${root}/resource/layuiAdmin/src/layuiadmin/layui/layui.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
//ajax请求后台数据
getShopCustomerManagePageInfo();
//点击搜索时 搜索数据
$("#selectButton").click(function(){
getShopCustomerManagePageInfo();
currentPageAllAppoint = 1; //当点击搜索的时候，应该回到第一页
toPage();//然后进行分页的初始化
})
toPage();
});
//分页参数设置 这些全局变量关系到分页的功能
var startAllAppoint = 0;
var limitAllAppoint = 10;
var currentPageAllAppoint = 1;
var totalPageAllAppoint = 0;
var dataLength = 0;
//ajax请求后台数据
function getShopCustomerManagePageInfo(){
$.ajax({
type:"post",
async:false,
url:"${root}/demo/layui_fys",
data:{start:startAllAppoint, limit:limitAllAppoint,selectValue:$("#selectValue").val()},
success:function(data,status){
/* data=eval("("+data+")"); */
getShopCustomesInfo(data.root);
startAllAppoint = data.currentResult;//当前页数(后台返回)
totalPageAllAppoint = data.totalPage;//总页数(后台返回)
}
});
}
function getShopCustomesInfo(data){
var s = "<tr><th>人员编号</th><th>英文姓</th><th>英文名</th><th>证件编号</th></tr>";
$.each(data,function(v,o){
s+='<tr><td>'+o.RYBH+'</td>';
s+='<td>'+o.YWX+'</td>';
s+='<td>'+o.YWM+'</td>';
s+='<td>'+o.ZJHM+'</td>';
});
if(data.length>0){
$("#t_customerInfo").html(s);
}else{
$("#page1").hide();
$("#t_customerInfo").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
}
}
function toPage(){
layui.use(['form', 'laypage', 'layedit','layer', 'laydate'], function() {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate,
laypage = layui.laypage;
var nums = 10;
//调用分页
laypage.render({
elem: 'paged'
,count: totalPageAllAppoint //得到总页数，在layui2.X中使用count替代了，并且不是使用"总页数"，而是"总记录条数"
,curr: currentPageAllAppoint
,skip: true
,jump: function(obj, first){
currentPageAllAppoint = obj.curr;
startAllAppoint = (obj.curr-1)*limitAllAppoint;
//document.getElementById('biuuu_city_list').innerHTML = render(obj, obj.curr);
if(!first){ //一定要加此判断，否则初始时会无限刷新
getShopCustomerManagePageInfo();//一定要把翻页的ajax请求放到这里，不然会请求两次。
//location.href = '?page='+obj.curr;
}
}
});
});
};
</script>
</head>
<body>
<div class="admin-main">
<blockquote class="layui-elem-quote">
<form class="layui-form" action="" >
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" id="selectValue" lay-verify="required" placeholder="客户姓名，电话" autocomplete="off" class="layui-input">
</div>
<button class="layui-btn" type="button" id="selectButton">搜索</button>
</div>
</form>
<span><a href="shop_customer_manager_page_info">显示所有客户</a></span>
</blockquote>
<fieldset class="layui-elem-field">
<legend>客户列表</legend>
<div class="layui-field-box layui-form">
<table class="layui-table admin-table" id="t_customerInfo">
</table>
</div>
</fieldset>
<div class="admin-table-page">
<div id="paged" class="page">
</div>
</div>
</div>
</body>
</html>
java:
@RequestMapping(value="layui_fys")
@ResponseBody
public Map<String, Object> layui_fys(Integer start, Integer limit, String selectValue) throws Exception{
System.out.println(start+"//"+limit+"//"+selectValue);
Map<String, Object> map=new HashMap<String,Object>();
Page page = new Page();
page.setStart(start);
page.setEnd(start+limit);
map.put("slz", selectValue);
map.put("page", page);
int total = demoService.getlayui_fysCount(map);
List<Map<String,Object>> list;
if(total>0){
list = demoService.getlayui_fys(map);
//System.out.println(list.get(0).get("ZJHM"));
}else{
list = new ArrayList<Map<String,Object>>();
}
System.out.println(list);
map.clear();
map.put("currentResult", start);
map.put("totalPage", total);
map.put("root", list);
//System.out.println("json:----" + jsonObject.toString());
return map;
}
sql:
//以Oracle数据库为例
<!-- layui计数 -->
<select id="getlayui_fysCount" parameterType="java.util.Map" resultType="java.lang.Integer">
select count(1) from crj_jwry_rcsp_ryjbxxb
<if test='slz != null and slz != "" '>
where rybh = #{slz} or zjhm = #{slz} or ywx= #{slz} or ywm= #{slz}
</if>
</select>
<!-- 数据列表layui -->
<select id="getlayui_fys" parameterType="java.util.Map" resultType="java.util.Map">
select b.* from (
select a.* ,rownum rn from (
select * from crj_jwry_rcsp_ryjbxxb
<if test='slz != null and slz != "" '>
where rybh = #{slz} or zjhm = #{slz} or ywx= #{slz} or ywm= #{slz}
</if>
order by rybh
) a where rownum <= #{page.end}
) b where rn>#{page.start}
</select>