layui表格分页不生效(无法正常显示)怎么解决？下面本篇文章给大家介绍一下layui数据表格分页无法正常显示的解决方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
应该先利用layui table中的parseData方法手动将数据切片分页，代码如下,要点是parseData: function(res){}中的方法，对从url中get到的数据进行手动分页处理。layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'http://localhost:8099/getScoreRecord'
,title:'积分操作记录表'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,cols: [[
{field:'sc_re_index',  title: '序号', sort: true}
,{field:'user_acc',  title: '账户名'}
,{field:'operate_value',  title: '积分数额', sort: true}
,{field:'rest_value',  title: '剩余积分'}
,{field:'sc__re_description', title: '备注'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
,{field:'operate_time', title: '积分操作时间', minWidth: 100, sort: true}
]]
,page: true
,limits: [3,5,10]  //一页选择显示3,5或10条数据
,limit: 10  //一页显示10条数据
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
console.log(this);
console.log(JSON.stringify(res));
if(this.page.curr){
result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
}
else{
result=res.data.slice(0,this.limit);
}
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
});
});
更多web前端知识，请查阅 HTML中文网 ！！

之前在练习layui的时候，遇到表格数据需要分页显示的，总是天真的以为要从数据库中取出全部数据，再在页面进行分页操作，其实应该将分页的代码操作在后台进行实现(其实之前都是在后台操作，只不过刚刚接触layui，天真以为它什么都帮我干了 哈哈)。
弄懂这件事之后，我在网上查了大量的文章，但多数都是以自己的业务需求出发的想法，多数照着弄都实现不了，很纠结，对于有代码洁癖的我来说，坚决认为layui还是能强大到不用额外的js和jquery代码，就能实现这个功能，而且不需要定义其他的除表格本身以外的其他div，就能将分页模块插进去(其实layui-table就自带了开启分页功能，真心想不懂还要另外的地方插入分页模块)，那么我就将折磨了我一下午的layui-table自带的分页功能以我的视角，给大家展示一下我的代码，希望能对初学者的大家有那么一点点帮助：
页面的表格区域：
layui的表格实例：(主要看limit和page这两个参数的写法)
//执行一个 table 实例
table.render({
elem: '#demo'//表格table的id属性
,height: 420
,url: '${pageContext.request.contextPath}/students/students' //请求数据接口
,limit:5//要传向后台的每页显示条数
//,page:true(自带的这个要注掉)
,page: { //支持传入 laypage 组件的所有参数(某些参数除外，如：jump/elem) - 详见文档
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']//自定义分页布局
,limits:[5,10,15]
,first: false //不显示首页
,last: false //不显示尾页
}
,title: '用户表'
,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
,cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
,{field: 'name', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80,}
,{field: 'city', title: '城市', width:100}
,{field: 'email', title: '邮箱', width: 150}
,{field: 'major', title: '专业', width: 80}
,{field: 'score', title: '成绩', width: 80, sort: true}
,{field: 'sign', title: '备注', width: 200}
,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
});
后台:controller
@ResponseBody//可以把一个集合转为json返回给前端
@RequestMapping(value = "students")
//注意参数的名字要与前端对应(当然你自己制定名字也行，这里就默认用它的参数名字接手了)
public Map showStudents(int page, int limit) throws IOException{
//获取全部学生信息
List students = studentsService.getStudents();
//获取分页后的每页学生信息
List student = studentsService.getStudentsCount(page,limit);
Map tableData =new HashMap();
//这是layui要求返回的json数据格式
tableData.put("code", 0);
tableData.put("msg", "");
//将全部数据的条数作为count传给前台(一共多少条)
tableData.put("count", students.size());
//将分页后的数据返回(每页要显示的数据)
tableData.put("data", student);
//返回给前端
return tableData;
}
service层的方法为：
@Service
public class StudentsService {
@Autowired
StudentsDao studentsDao;
//获取所以学生数据
public List getStudents() {
return studentsDao.getStudents();
}
//获取分页条件的每页数据
public List getStudentsCount(int page, int pageSize) {
return studentsDao.getStudentsCount(page, pageSize);
}
}
dao层的方法为：
@Component
public interface StudentsDao {
//获取所以学生数据
public List getStudents();
//获取分页条件的每页数据
public List getStudentsCount(int page,int pageSize);
}
daoImp层的方法为：
@Repository
public class StudentDaoImpl implements StudentsDao {
@Autowired
JdbcTemplate jdbcTemplate;
@Override
public List getStudents() {
String sql = "select * from students";
RowMapper rowMapper=new BeanPropertyRowMapper(Students.class);
List students = jdbcTemplate.query(sql, rowMapper);
return students;
}
@Override
public List getStudentsCount(int page, int pageSize) {
int start = (page-1)*pageSize;
//mysql的分页条件
String sql = "select *from students limit "+start+" ,?";
RowMapper rowMapper=new BeanPropertyRowMapper(Students.class);
List students = jdbcTemplate.query(sql, rowMapper,pageSize);
return students;
}
}
实现效果：
image.png
这样一个利用layui-table自身的开启分页功能的代码示例就实现了。

先看一下图：



看到图中并没有展示分页的工具，layui给的实例 page：true就可以，但是写上了也不行

解决办法：找到你layui.css  里面有个  

.layui-hide 属性


把这个注释掉就可以了

前言
相信看到这个文章的人都是那些不知道如何将layui的分页如何实现的人，layui官方有一个组件 叫做laypage 但是我作为一个java开发人员，实在不是很懂原生js的使用，就连这个layui我熟练起来也花了一部分时间。

下面我来 讲解一下我的layui的表格进行分页的。
先看效果


这里的效果就是可以点击页码进行页面内容的跳转，和layui的表格完美适配
实现
java代码实现：
实体类
package com.zzq.common;
/**
 * @ClassName: PageInfo 
 * @Description: 自定义的page对象  为了适应 layui
 * @date: 2019年11月29日 上午10:10:01
 */
public class PageInfo {
	
	/**
	 * 	数据  对应 pagerheper的数据
	 */
	private Object data;
	/**
	 * 	总数据条数 对应layui的count
	 */
	private Long count;

	public Object getData() {
		return data;
	}
	public void setData(Object data) {
		this.data = data;
	}
	public Long getCount() {
		return count;
	}

	public void setCount(Long count) {
		this.count = count;
	}
}


下面是实现类
//控制器  调用   获取 图书的 列表
 	@RequestMapping(value = "getuserbookleadlist")
	@ResponseBody
	//这里的 BookLendQuery  是用来做 页面上面的 搜索的   不做 条件查询可以不用这个参数
	public Object getuserbooklist(BookLendQuery query, HttpSession session) {
	//获取登录信系  得到 表中主键 
		userinfo userinfo=(userinfo)session.getAttribute("user");
		if(userinfo==null) {return new BaseResult(0, "登录状态已过期，请重新登录");}
		//此处使用的是自己创建的Pageinfo
		PageInfo pageInfo=  (PageInfo) bookservice.getUserLeadBookByUser(query, userinfo.getUserid());
		return new BaseResult(0, "", pageInfo);
	}


BookLendQuery  代码
package com.zzq.common;

public class BaseQuery {
	/**
	 *	页码    默认 1
	 */
	private Integer page = 1;
	/**
	 * 	每页的数据长度  默认  10
	 */
	private Integer limit = 10;
	
	public Integer getPage() {
		return page;
	}
	public void setPage(Integer page) {
		this.page = page;
	}
	public Integer getLimit() {
		return limit;
	}
	public void setLimit(Integer limit) {
		this.limit = limit;
	}

}


package com.zzq.common;

public class BookLendQuery extends BaseQuery{
//前端传来 的图书名称 与 班级 
	public String bookname;
	public Integer bookclass;
	public String getBookname() {
		return bookname;
	}
	public void setBookname(String bookname) {
		this.bookname = bookname;
	}
	public Integer getBookclass() {
		return bookclass;
	}
	public void setBookclass(Integer bookclass) {
		this.bookclass = bookclass;
	}
	
}


server层
/**
	 * 用户获取到所有的用户图书
	 * @param query
	 * @param userid
	 * @return
	 */
	public Object getUserLeadBookByUser( BookLendQuery query,Integer userid) {
		//使用的pageHelper分页插件  获取分页的页数与页面条数
Page<Object> page=PageHelper.startPage(query.getPage(),query.getLimit());
		//调用 DAO实现查询  
		bookleadinfoDAO.userselectleadinfoByuserid(query.getBookname(),query.getBookclass(),userid);
		//创建自定义 Pageinfo对象
		PageInfo pageinfo =new PageInfo();
		//将pageHepler中得到的数据信息set进 自定义对象中
		pageinfo.setCount(page.getTotal());
		pageinfo.setData(page.getResult());
		return pageinfo;
		
	}
	```

DAO层   接口
 List<booklendinfo> userselectleadinfoByuserid(@Param("bookname")String bookname,@Param("bookclass")Integer bookclass,@Param("userid")Integer actionid);

DAO层  Mapper 查询方法
<select id="userselectleadinfoByuserid" parameterType="java.lang.Integer" resultMap="fullResultMap">
SELECT
   actionid,userid,lendtime,isover,isdel,bookname,isgrounding,price,subdate,classify,e.bookid
FROM
   (
   	SELECT
   		*
   	FROM
   		booklendinfo
   	<where>
   	<if test="userid!=null">
   		userid = #{userid}
   	</if>
   	</where>	
   ) e
INNER JOIN (
   SELECT
   	*
   FROM
   	bookinfo
   <where> 
   <if test="bookclass!=null">
    and classify =#{bookclass}
   </if>
   <if test="bookname!=null and bookname!=''">
    and bookname like'%${bookname}%'
   </if>
   </where>
   
) d ON e.bookid = d.bookid
 </select>

前端代码   我根据页面元素直接贴全部的   主要 看我的 写了注释部分
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ include file="/view/common/base.jsp"%>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="${ctxsta}/img/img-01.png" type="image/x-icon" />
<link rel="stylesheet" href="${ctxsta}/layui/layui/css/layui.css">
<title>Insert title here</title>
</head>
<body>
<div style="margin-top: 20px;margin-left: 20px">

	<hr class="layui-bg-green">
	<form class="layui-form layui-form-pane">
		<!-- 一排3个 -->
		<div class="layui-form-item">
			<div class="layui-inline"style="width: 150px;">
				用户  ：<h1>${user.username}</h1>
			</div>
			
			<div class="layui-inline">
				<div class="layui-input-inline" style="width: 190px;">
				 账户余额:<h1>${count}<h1>
				</div>
				<div class="layui-input-inline" style="left: 620px;">
				
				</div>
			</div>

		</div>
	</form>
	<hr class="layui-bg-green">
	
	<form class="layui-form layui-form-pane">
		<!-- 一排3个 -->
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">书籍名称</label>
				<div class="layui-input-inline">
					<input name="bookname" id="bookname" class="layui-input" placeholder="书籍名称"  />
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">书籍类型</label>
				<div class="layui-input-inline">
					 <select name="bookclass" lay-verify="required" id="bookclass">
      	 			 <option value=""></option>
      	 			  <option value="1">计算机</option>
       				 <option value="2">人文</option>
       				 <option value="3">金融</option>
       				 <option value="4">社科</option>
     				 </select>
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-inline" style="width: 90px;">
					<button type="button" class="layui-btn" id="searchBtn"><i class="layui-icon layui-icon-search"></i>搜索</button>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn  layui-btn-primary" type="reset"><i class="layui-icon layui-icon-refresh-1"></i>重置</button>
				</div>
			</div>

		</div>
	</form>
	<table id="dataTable" lay-filter="dataTableFilter"></table>
</div>

<table id="demo" lay-filter="dataTableFilter1"></table>
<form class="layui-form" id="leadform"  style="display:none">
 <div class="layui-form-item">
    <label class="layui-form-label" style="width:170px">确认借阅书籍名称</label>
    <div class="layui-input-block" style="width:270px">
    <input type="text" name="title"  style="width:270px"
    lay-verify="required" class="layui-input" id="leadbookname" value="" readonly="true">
    </div>
  </div>

 <div class="layui-form-item layui-form-text">
    <label class="layui-form-label" style="width:150px" >请确认借阅用户</label>
    <div class="layui-input-block"  style="width:270px">
      <input type="text" name="title"  style="width:270px"
    lay-verify="required" class="layui-input" id="leadbookuser" value="${user.username}" readonly="true">
    </div>
  </div>
  
 <div class="layui-form-item layui-form-text">
    <label class="layui-form-label" style="width:120px" >书籍押金</label>
    <div class="layui-input-block"  style="width:270px">
      <input   style="width:270px"
    	 class="layui-input" id="leadbookprice"  readonly="true"  >
    </div>
  </div>
  
</form>


</body>


<!-- 行工具栏 -->
<script type="text/html" id="rowBtns">
	<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add"></i>申请归还</button>
</script>

<script language="JavaScript" src="${ctxsta}/jquery-3.2.0.min.js"></script>
<script src="${ctxsta}/layui/layui/layui.js"></script>
<script>
    function Format(datetime,fmt) {
        if (parseInt(datetime)==datetime) {
            if (datetime.length==10) {
                datetime=parseInt(datetime)*1000;
            } else if(datetime.length==13) {
                datetime=parseInt(datetime);
            }
        }
        datetime=new Date(datetime);
        var o = {
            "M+" : datetime.getMonth()+1,                 //月份
            "d+" : datetime.getDate(),                    //日
            "h+" : datetime.getHours(),                   //小时
            "m+" : datetime.getMinutes(),                 //分
            "s+" : datetime.getSeconds()                 //秒
                    
        };
        if(/(y+)/.test(fmt))
            fmt=fmt.replace(RegExp.$1, (datetime.getFullYear()+"").substr(4 - RegExp.$1.length));
        for(var k in o)
            if(new RegExp("("+ k +")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        return fmt;
    }
</script>
<script type="text/javascript">
	layui.use(['form','layer','laydate','table'],function(){
		
		var layer = layui.layer;
		var table = layui.table;
		var form = layui.form;
		//渲染table数据表格
		var t = table.render({
			id:"dataTableId",
			elem:"#dataTable",
			url:"${pageContext.request.contextPath}/book/getuserbookleadlist",//数据地址
			page:true,//开启分页
			toolbar:"#headerBtns",//
			height:450,
			parseData:function(rs){//数据解析
				if(rs.code == 0){
					return {
						"code":rs.code,
						"msg":rs.message,
						"count":rs.data.count,
						"data":rs.data.data
					}
				}
			},
			cols:[[//数据表头
				{field:'actionid',title:'交易编号'},
				{field:'bookid',title:'书籍编号'},
				{field:'bookname',title:'书籍名称'},
				{field:'subdate',title:'上架时间',
			    	 templet:'<div>{{ Format(d.subdate,"yyyy-MM-dd")}}</div>'},
			   {field:'lendtime',title:'借阅时间',
				     templet:'<div>{{ Format(d.lendtime,"yyyy-MM-dd hh:mm:ss")}}</div>'},
				    	 	 
				{field:'price',title:'借阅押金' ,style:'color:green'},
			
				{field:'classify',title:'书籍分类 ',style:'color:blue' ,templet:function(d){
					if(d.classify == 1){
						return "计算机";
					}else if(d.classify == 2){
						return "人文";
					}else if(d.classify == 3){
						return "金融";
					}else if(d.classify == 4){
						return "社科";
					}
				}},
				{field:'isover',title:'借阅状态' ,style:'color:red',templet:function(d){
					if(d.isover == 1){
						return "借阅中";
					}else if(d.isover == 3){
						return "归还中";
					}else{
						return "已归还";
					}
				}},
				{field:'isgrounding',title:'是否上架' ,style:'color:green',templet:function(d){
					if(d.isgrounding == 1){
						return "上架中";
					}else{
						return "";
					}
				}},
				{title:'操作',toolbar:'#rowBtns',fixed:'right',width:'150'}
			]]
		});
		//搜索按钮事件
		$("#searchBtn").click(function(){
			var bookclass = $("#bookclass").val();
			var bookname = $("#bookname").val();
			//进行表格数据重载  j进行   条件查询
			t.reload({
				where:{
					'bookname':bookname,
					'bookclass':bookclass
				},
				page:1
			});
		});
		
		//==行监听事件=============================================
		table.on("tool(dataTableFilter)",function(d){
			var event = d.event;
			var data = d.data;
			if(event == "add"){
				//归还书籍
				add(data,d);
			}
		});
		
		function add(data,d){
			//使用二次确认
			layer.confirm("确定要归还吗?",function(index){
				//将需要重置的用户ID 传给后台
				$.post("${pageContext.request.contextPath}/book/returnbook",{actionid:data.actionid},function(rs){
					//校验业务码
					if(rs.code != 200){
						//显示异常信息
						layer.msg(rs.message);
						return false;
					}
					layer.msg("删除成功");
					//关闭弹出层
					layer.close(index);
					//重载数据列表
					$("#searchBtn").click();
				});
			});
		}

		
	});
</script>
<script type="text/javascript">
function suaxin()
{
//页面刷新
	window.location.href = '${pageContext.request.contextPath}/common/tomyleadbook';
}
	</script>
</html>