第一步：前台页面设置
var count = 100;
page();
function page(){
$.ajax({
url: '/maven02/user/getCount',
dataType: 'json',
type: 'get',
async:false,
success: function(data){
console.log(data.count)
count = data.count;
}
});
}
这里需要修改我们在前边说的全部查询接口，以及一个算出共有多少条数据的接口
第二步：写一个查询共有多少条数据的接口
Controller层
@RequestMapping("/getCount")
@ResponseBody
public String getCount(){
int count = userService.getCount();
String data = "{\"count\":"+count+"}";
return data;
}service层
public int getCount();serviceImpl层
public int SelectCount() {
return this.registDao.SelectCount();
}dao层
public int getCount();mapper层
<select id="getCount" resultType="java.lang.Integer">
select count(*) from user;
</select>resultType ：返回类型
第三步：分页查询
Controller层
@RequestMapping("/findAll")
@ResponseBody
public Map<String,List<User>> findAll(int page,int limit){
List<User> logins = userService.findAll(page,limit);
Map<String,List<User>> map = new HashMap<String, List<User>>();
map.put("data",logins);
return map;
}service层
List<Regist> selectAll(int pageInteger,int limitInteger);serviceImpl层
/*
* pageInteger:代表我们现在在第几页上
* limitInteger：每页的个数
* (non-Javadoc)
* @see com.javen.service.IRegistService#selectAll(int, int)
*/
public List<Regist> selectAll(int pageInteger, int limitInteger) {
int pageIndex = (pageInteger-1) * limitInteger;
int pageSize = limitInteger;
return this.registDao.selectAll(pageIndex, pageSize);
}
dao层
List<Regist> selectAll(int pageIndex,int pageSize);mapper层
<select id="findAll" resultMap="BaseResultMap" parameterType="java.lang.Integer">
select * from user limit #{param1},#{param2}
</select>全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</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, maximum-scale=1">
<link rel="stylesheet" href="../sources/layui/css/layui.css" media="all">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../sources/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
var table = layui.table;
var count = 100;
page();
function page(){
$.ajax({
url: '/SSMDemo/user/getCount',
dataType: 'json',
type: 'get',
async:false,
success: function(data){
console.log(data.count)
count = data.count;
}
});
}
table.render({
elem: '#test'
,url:'/SSMDemo/user/findAll' //改地址是访问地址
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'phone', width:80, title: '手机号'}
,{field:'sex', width:50, title: '性别'}
,{field:'age', width:80, title: '年龄'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
,limit:10
,response:{
statusName: 'status' //规定数据状态的字段名称，默认：code
,dataName: 'rows' //规定数据列表的字段名称，默认：data
}
,parseData: function(item){ //将原始数据解析成 table 组件所规定的数据
return {
"status": 0, //解析接口状态
"message":"成功", //解析提示文本
"count": count, //解析数据长度
"rows": item.data //解析数据列表
};
}
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
});
</script>
</body>
</html>
4853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
