PHP layUI如何分页,layui的分页怎么实现

如果你想了解更多关于layui的知识，可以点击：layui教程

这是是基于自己搭建的SSM案例框架来实现

效果图如下

分页jsp和js内容模块，暂时写在了一块，当然也可以提出来写个js文件

pageEncoding="UTF-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

layui

搜索

查看

编辑

删除

layui.use('table', function(){

var table = layui.table;

var ids =new Array();

var curPath=window.document.location.href;

var localhostPaht=curPath.substring(0,32);

var selectValue=document.getElementById("selectValue").value;

console.log(selectValue);

table.render({

elem: '#test'

// ,url:localhostPaht+'userlist.do?page='+page+'&limit='+limit+'&selectValue='+selectValue

,url:localhostPaht+'userlist.do'

//分页插件

,page: { //支持传入 laypage 组件的所有参数(某些参数除外，如：jump/elem) - 详见文档

layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局

,groups: 1 //只显示 1 个连续页码

,first: false //不显示首页

,last: false //不显示尾页

}

//显示字段参数

,cols: [[

{field:'uid', width:'5%', title: 'ID', sort: true}

,{field:'uname', width:'10%', title: '用户名'}

,{field:'sex', width:'8%', title: '性别'}

,{field:'national', width:'8%', title: '民族', sort: true}

,{field:'age', width:'8%', title: '年龄'}

,{field:'constellation', title: '星座', width:'10%'}

,{field:'unative', width:'10%', title: '籍贯', sort: true}

,{field:'labeltext', title: '描述', width:'20%'}

,{fixed: 'right', width:'20%', title: '基本操作',align:'center', toolbar: '#barDemo'}

]]

});

});

后台实现

主要的地方就是page、limit、count，其他的事情有layui分页插件来做(jsp页面有该代码)，只要page、limit、count这三个值，分页就能实现//分页插件

,page: { //支持传入 laypage 组件的所有参数(某些参数除外，如：jump/elem) - 详见文档

layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局

,groups: 1 //只显示 1 个连续页码

,first: false //不显示首页

,last: false //不显示尾页

}

返回object类型，js会将这个类型当做json数据@SuppressWarnings("null")

@RequestMapping(value = "userlist")

@ResponseBody

public Object userlist(HttpServletRequest request, HttpServletResponse response) {

//分页

String pageNo=request.getParameter("page");

String pagesize=request.getParameter("limit");

String uname=request.getParameter("selectValue");

HashMap map=new HashMap();

map.put("pageNo", (Integer.valueOf(pageNo)-1));

map.put("pagesize", pagesize);

//查询总数量

List listsize = user.findAll();

//分页传参page和limit

List list=null;

try {

list = user.selectAlllist((Integer.parseInt(pageNo)-1)*Integer.parseInt(pagesize),Integer.parseInt(pagesize));

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

System.out.println("条数："+list.size());

Map result = new HashMap();

int count = listsize.size();

JSONArray json = JSONArray.fromObject(list);

String js=json.toString();

//*****转为layui需要的json格式，必须要这一步，博主也是没写这一步，在页面上数据就是数据接口异常

String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}";

System.out.println(jso);

return jso;

}

对应的sqlselect uid,uname,upass,sex,age,constellation,unative,national,labeltext from user where 1=1 limit #{pageNo},#{pagesize}

以及dao方法的传参public List selectAlllist(

@Param("pageNo") Integer pageNo

,@Param("pagesize") Integer pagesize);

daoimpl的实现@Override

public List selectAlllist(Integer pageNo, Integer pagesize) {

// TODO Auto-generated method stub

return user.selectAlllist(pageNo,pagesize);

}

service的实现public List selectAlllist(Integer pageNo, Integer pagesize);

serviceimpl的实现@Override

public List selectAlllist(Integer pageNo, Integer pagesize) {

// TODO Auto-generated method stub

return usi.selectAlllist(pageNo,pagesize);

}