layui的分页怎么实现-Layui教程-PHP中文网

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

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

效果图如下

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


html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


  <meta>
  <title>layui</title>
 <link>js/layui/css/layui.css">
    <script>js/layui/layui.all.js"></script>
    <script>js/layui/layui.js"></script>
    <script>js/jquery-3.3.1.min.js"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->


 <div>
 <div>
     <input>
 </div>
 <button>搜索</button>
 </div>

后台实现

主要的地方就是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数据

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

@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<string> map=new HashMap<string>();
		map.put("pageNo", (Integer.valueOf(pageNo)-1));
		map.put("pagesize", pagesize);
		//查询总数量
		List<user> listsize = user.findAll();
		//分页传参page和limit
		List<user> 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<string> result = new HashMap<string>();
		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;
   
	}</string></string></user></user></string></string>

对应的sql

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

以及dao方法的传参

  public 	List<user> selectAlllist(
    		@Param("pageNo") Integer pageNo
    		,@Param("pagesize") Integer pagesize);</user>

daoimpl的实现

@Override
	public List<user> selectAlllist(Integer pageNo, Integer pagesize) {
		// TODO Auto-generated method stub
		return user.selectAlllist(pageNo,pagesize);
	}</user>

service的实现

public List<user> selectAlllist(Integer pageNo, Integer pagesize);</user>

serviceimpl的实现

@Override
	public List<user> selectAlllist(Integer pageNo, Integer pagesize) {
		// TODO Auto-generated method stub
		return usi.selectAlllist(pageNo,pagesize);
	}</user>