jfinal结合layui实现分页功能

最新推荐文章于 2023-03-31 09:48:18 发布

转载最新推荐文章于 2023-03-31 09:48:18 发布 · 238 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2427561/blog/1537679

文章标签：

#javascript #python #ViewUI

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

2019独角兽企业重金招聘Python工程师标准>>>

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