jfinal结合layui实现分页功能

本文介绍如何使用layui框架实现前端分页功能,并通过jfinal后端框架获取分页数据。具体步骤包括配置layui表格组件及分页参数,以及在后端实现分页查询并按layui所需格式返回数据。

1、layui的分页,本来准备用table+laypage,尝试失败,后面我还会继续尝试。这里我主要用方法级渲染的方式,代码如下:

<table id="userTable"></table>
<script type="text/html" id="userBar">
  <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>
  table.render({
	  elem: '#userTable' //指定原始表格元素选择器(推荐id选择器)
	  ,height: 315 //容器高度
	  ,url:'/user/userJson'
	  ,cols:[[ //标题栏
	  		  {field:'id', width:80,fixed: true,title: 'ID'}
	 	     ,{field:'user_name', width:120,title: 'ID'}
	 	     ,{field:'email', width:120,title: 'ID'}
	 	     ,{field:'telephone', width:120,title: 'ID'}
	 	     ,{field:'adress', width:120,title: 'ID'}
	 	     ,{field:'sex', width:120,title: 'ID'}
	 	     ,{field:'name', width:120,title: 'ID'}
	 	     ,{fixed: 'right', width:250, align:'center', toolbar: '#userBar'}
	         ]]
     ,page: true
     ,limits: [30,60,90,150,300]
     ,limit: 2 
	});

这里只要指定 ,page: true和limit,layui就会自动将返回的数据根据limit(即每行显示的数据条数)及后台数据设置的count进行分页,分成count/limit页

2、jifnal分页如下所示:

	public Page<User> getUserList(int pageNumber,int pageSize) {
		SqlPara sqlPara = dao.getSqlPara("sys.getUserList");
		Page<User> userList = dao.paginate(pageNumber, pageSize, sqlPara);
		return userList;
	}

到这里我们要将这个数据转换成layui需要的数据格式再返回,如下所示:

	public void userJson(){
		int pageNumber = getParaToInt("page");//当前页
		int pageSize = getParaToInt("limit");//每页显示的数据条数
		Page<User> userList = userService.getUserList(pageNumber,pageSize);//获得用户信息
		MyPage<User> page = new MyPage<User>();
		page.setCode(0);
		page.setCount(userList.getTotalRow());
		page.setMsg("");
		page.setData(userList.getList());
		renderJson(page);
	}

至此:jfinal结合layui实现分页功能实现

转载于:https://my.oschina.net/u/2427561/blog/1537679

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值