php如何使用layui.table分页,layui实现数据表格及分页的方法
一.前端部分
html只需要放一个有id的div就行了,方便js获取渲染区域
js部分需要注意url为异步数据接口,done是渲染完表格之后的回调函数table.render({
elem: '#data_grid'
//,width: 900
//,height: 274
,cols: [[ //标题栏
{field: 'id', title: 'ID', width: 80, sort: true}
,{field: 'username', title:'用户名',width: 100} //空列
,{field: 'password', title: '密码', width: 120}
,{field: 'gender', title: '性别', width: 150}
,{field: 'nichen', title: '昵称', width: 150}
,{field: 'birthday', title: '出生年月', width: 120}
,{fixed: 'right', width: 215,align:'center', toolbar: '#barDemo'}
]]
,url:url
,skin: 'row' //表格风格
,even: true
,page: true //是否显示分页
,limits: [3,5,10]
,limit: 5 //每页默认显示的数量
,done:function(res){
userPage.data = res.data;
}
//,loading: false //请求数据时,是否显示loading
});
根据条件查询,表格异步刷新,where为附带参数$('#sub_query_form').on('click',function () {
var queryPo = page.formToJson($('#query_form').serialize());
var table = layui.table;
table.reload('data_grid', {
url: '/getUserList.action',
page:{
curr:1 //从第一页开始
},
method:'post',
where:{
queryStr:queryPo
},
done:function (res) {
userPage.data = res.data;
}
});
});
将x-www-form-urlencoded转化为json字符串formToJson:function (data) {
data=data.replace(/&/g,"\",\"");
data=data.replace(/=/g,"\":\"");
data="{\""+data+"\"}";
return data;
}
表格工具栏使用
1.首先在html里定义好按钮
增加
查看
编辑
删除
{{# if(d.auth > 2){ }}
审核
{{# } }}
2.js内引用layui.use('table', function(){
var table = layui.table;
userPage.tab('/getUserList.action');
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
userPage.data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID:'+ data.id + ' 的查看操作');
}
else if(obj.event === 'del'){
layer.confirm('真的要删除这条记录么',{icon: 3, title:'确定删除'}, function(index){
obj.del();
$.post('/doDelete.action?id='+data.id,function (res) {
userPage.reload(res);
});
layer.close(index);
});
}
else if(obj.event === 'add'){
layer.open({
title:'增加窗口',
content:userPage.template,
yes:function () {
var user = page.formToJson($('#layer_form').serialize());
var data = 'user='+user;
$.post('/doAdd.action',data,function (res) {
userPage.reload(res);
});
layer.closeAll();
}
})
}
else if(obj.event === 'edit'){
layer.open({
title:'编辑窗口',
content:userPage.template,
success:function () {
$('input[name="id"]').val(userPage.data.id);
$('input[name="username"]').val(userPage.data.username);
$('input[name="password"]').val(userPage.data.password);
$('input[name="gender"]').val(userPage.data.gender);
$('input[name="nichen"]').val(userPage.data.nichen);
$('input[name="birthday"]').val(userPage.data.birthday);
},
yes: function(){
var mgUser = page.formToJson($('#layer_form').serialize());
var data = 'user='+mgUser;
$.post('/doEdit.action',data,function (res) {
userPage.reload(res);
});
layer.closeAll();
}
})
}
});
});
二.服务端部分
Controller层需要接收以下参数,page,limit,要查询的条件,返回值根据layui文档给出的默认返回值@RequestMapping("/getUserList")
@ResponseBody
public PageList getUserList(@RequestParam(required = false,defaultValue = "1") int page,@RequestParam(required = false,defaultValue = "5") int limit,@RequestParam(required = false) String queryStr){
QueryPo queryPo = null;
if (!StringUtils.isEmpty(queryStr)){ //性别类型转换
queryPo = JSONObject.parseObject(queryStr,QueryPo.class);
if ("1".equals(queryPo.getGender())){
queryPo.setGender("男");
}
if ("2".equals(queryPo.getGender())){
queryPo.setGender("女");
}
}
PageList pageList = new PageList();
try {
if (!StringUtils.isEmpty(queryPo)){ //中文字转码
if(!StringUtils.isEmpty(queryPo.getKeywords())){
queryPo.setKeywords(URLDecoder.decode(queryPo.getKeywords(),"utf-8"));
}
}
List userList = userService.getUserList(page,limit,queryPo); //根据条件查询分页数据
pageList.setCode("0");
pageList.setMsg("ok");
pageList.setData(userList);
int count = userService.countUserByExample(queryPo);
pageList.setCount(count);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
pageList.setCode("-1");
pageList.setMsg("数据获取异常");
return pageList;
}
return pageList;
}
Service层根据条件查询并分页public List getUserList(int page , int limit, QueryPo queryPo) {
MgUserExample userExample = new MgUserExample();
MgUserExample.Criteria criteria = userExample.createCriteria();
if(!StringUtils.isEmpty(queryPo)){
if (!StringUtils.isEmpty(queryPo.getGender())){
criteria.andGenderEqualTo(queryPo.getGender());
}
if (!StringUtils.isEmpty(queryPo.getKeywords())){
criteria.andUsernameLike("%"+queryPo.getKeywords()+"%");
}
}
userExample.setStart((page-1)*limit);
userExample.setLimit(limit);
List mgUsers = userMapper.selectByExample(userExample);
return mgUsers;
}
注意由于mybatis逆向工程生成的Example没有limit和page,所以需要自己加上private int start;
private int limit;
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
接着修改Mybatis的mapper.xml,需要加上分页条件
select
distinct
from mg_user
order by ${orderByClause}
limit #{start},#{limit}
本文转自:https://www.cnblogs.com/wangxiayun/p/9145638.html
更多layui知识请关注PHP中文网layui教程栏目
php如何使用layui.table分页,layui实现数据表格及分页的方法相关推荐
- springboot整合layui实现数据表格的分页操作
第一步,引入依赖文件 <link rel="stylesheet" href="./layui/css/layui.css"> <script ...
- js layui跳转页面_Layui数据表格跳转到指定页的实现方法
Layui数据表格跳转到指定页的实现方法 1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 2.获取上述input并设置其value属性值为目标跳转页面页码 $(&quo ...
- layui 传递前端请求_Layui数据表格 前后端json数据接收的方法
先上效果图: 前端数据表格: 编号菜单名称菜单路径菜单图标菜单子菜单操作 编辑 删除 js代码 $(function () { //注意:这里是数据表格的加载数据,必须写 layui.use(['ta ...
- layui table数据表格前端分页
下面js代码是在前端进行分页,主要是利用表格插件的parseData参数,该参数触发是在请求数据回来后,但还未显示在表中时触发的. layui.use('table', function(){var ...
- layui数据表格及分页
一.前端部分 html只需要放一个有id的div就行了,方便js获取渲染区域 <div id="data_grid" lay-filter="demo" ...
- layui table 全选过滤_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
- layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
- layui表格更改一列数据_layui数据表格隐藏列的方法介绍
在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性. table.render({ elem: '#test' ,url:'${p ...
- mysql 分页_百万数据下mysql分页问题
点击蓝字关注我们!每天获取最新的编程小知识! 源 / php中文网 源 / www.php.cn 百万数据下mysql分页问题 (查看原文请点击本文末尾左下角: 在开发过程中我们经常会使用分 ...
最新文章
- Vs2015 mysql ef_VS2015 +EF6 连接MYSQL数据库生成实体
- LeetCode 多线程 1114. 按序打印
- oracle sql developer 查看游标结果集(3.0.04
- asp python 定时任务_python定时任务最强框架APScheduler详细教程
- 华为杯大学生计算机软件大赛,关于举办2018年西安电子科技大学程序设计网络赛暨第十六届“华为杯”大学生程序设计竞赛的通知...
- 【js拾遗】名称空间
- php微信支付使用ajax,接入微信公众号支付,选择支付方式后,只弹出“error’”(php)...
- python编程入门电子书-Python编程从入门到实践PDF电子书
- 网络编程-TCP/IP各层介绍(5层模型讲解)
- Objective-C与Swift下的自定义打印函数(Debug和Release)
- CPU-BenchMark
- Java和c++的栈和队列的异同
- 【组合】BZOJ3505(Cqoi2014)[数三角形]题解
- 【ENVI】基于Landsat遥感影像的盐城市土地利用信息提取
- 关于计算机安全的英语文章,计算机专业英语期末论文
- centos系统使用pptpd搭建在windows客户端的vpn服务器
- 网络安全工程师零基础入门:(企业级)从入门到精通学习路线规划,学完即可就业
- 【深度学习NLP论文笔记】《Deep Text Classification Can be Fooled》
- C 语言 随机prim算法 生成迷宫
- python1到100奇数相加_Python:从inpu将奇数相加
热门文章
- CDOJ 1292 卿学姐种花 暴力 分块 线段树
- 2023.1.3单词打卡
- 跨国企业在中国 | 加特可苏州工厂开业生产尖端变速器;格拉默与一汽子公司办合资企业...
- centos代理服务器squid安装与使用以及windows代理服务器CCproxy安装使用
- 【Scratch】青少年蓝桥杯_每日一题_4.07_画正六边形组成的图形
- vue watch 修改滚动条_vue实现滚动监听,点击瞄点平滑滚动,控制内嵌滚动条滚动...
- score在java中是什么意思_java:定义学生类Student, 其中属性有 name, id, score ,分别表示姓名,学好,成绩........
- VirtualBox 下使用招商银行网银专业版(U盾)
- 《深入理解Java虚拟机:JVM高级特性与最佳实践》书评
- 笔记56--listview之selector、listview中同一时刻只有一个item能被选中