Layui表格配合Laypage分页插件遇见的问题及解决办法

（本文编写30分钟，预计阅读时间5分钟）

本文前提：

    项目采用的是Layui来渲染表格，由于表格原生的分页并不是那么友好（要查出所有的数据然后前端进行分页，本项目数据量有点大，其次前端分页是比较占性能的一种手段）所以不采用前端分页的方法，然后选择官网给出的Laypage分页插件来给予分页支持。

遇见的问题：

分页的时候表格内容刷新了，而分页一直停留在第1页

解决办法

1、页面加载的时候从后台获取数据

function loadDyna(pageSize,currentPage)
	{
		pageSize=10;
		if(currentPage==""){
			currentPage=1
		}else{
			currentPage=currentPage
		}
		 $.ajax({
			   type: "POST",
			   url: "url地址",
			   data: {"rerId":rerId,"pageinfo.pageSize":pageSize,"pageinfo.currentPage":currentPage},//和后台交互传递所需参数
			   success: function(data){
				  //console.log(currentPage);
				   var data_list=data.releaseStatisticsList//列表内容
				   var allpages=data.pageinfo.totalRecords
				   reloadTable(data_list,pageSize,allpages,currentPage);//渲染表格并传递参数
			   }
		 
			});
	}
   
loadDyna(); //运行定义函数

2、渲染表格

function reloadTable(data,pageSize,allpages,currentPage)

{

layer.load(2); if(data!==""){ layer.closeAll('loading'); //var data = eval('('+data+')'); var mydata= data; var datalength=mydata.length; //console.log(datalength) exp_tableObj.reload({data:mydata,limit:datalength}); //exp_tableObj.reload({data:mydata,limit:datalength}); pageslist(allpages,pageSize,currentPage) } else{ layer.closeAll('loading'); layer.msg("请稍后再试"); }}

data 为表格数据，pageSize为每页显示数量，allpages为总条数，currentPage为当前选择页码

以上参数缺一不可

3、页码渲染

function pageslist(pages,pageSize,currentPage){
		laypage.render({
		    elem: 'pagers'
		    ,count: pages //后台返回分页条数的总和
		    ,limit: pageSize //每页显示的数据的条数,layui会根据count，limit进行分页的计算 
		    ,skip: true
		    ,curr: location.hash.replace('#!currentPage=', '') //获取起始页
		    ,hash: 'currentPage' //自定义hash值
		    ,jump: function(obj, first){
		      if(!first){
		        //layer.msg('第 '+ obj.curr +' 页');
		        loadDyna(pageSize,obj.curr)
		       
		      }
		    }
		  });
		
	}

这里curr和hash很重要，一定要传递这两个参数

表格渲染的时候page设置成false

总结：

该传递的参数一个都不能少，主要还是细心的看官方文档。