layui的分页怎么实现

来源：互联网 2024-10-09 15:49:00

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

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

效果图如下

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

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>  <meta charset="utf-8">  <title>layui</title> <link rel="stylesheet" href="<%=basePath %>js/layui/css/layui.css">    <ｓｃｒｉｐｔ type="text/javascript" src="<%=basePath %>js/layui/layui.all.js"></ｓｃｒｉｐｔ>    <ｓｃｒｉｐｔ type="text/javascript" src="<%=basePath %>js/layui/layui.js"></ｓｃｒｉｐｔ>    <ｓｃｒｉｐｔ  type="text/javascript" src="<%=basePath %>js/jquery-3.3.1.min.js"></ｓｃｒｉｐｔ>  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --></head><body> <p class="layui-form-item"> <p class="layui-input-inline">     <input type="text" name="selectvalue" id="selectValue" lay-verify="required" placeholder="客户姓名，电话" autocomplete="off" class="layui-input"> </p> <button class="layui-btn" type="button"  id="selectButton">搜索</button> </p> <table class="layui-hide" id="test"></table> <ｓｃｒｉｐｔ type="text/html" id="barDemo">  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" οnclick="yhck()">查看</a>  <a class="layui-btn layui-btn-xs" lay-event="edit"οnclick="yhbj()">编辑</a>  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"οnclick="yhsc()">删除</a></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ>layui.use(&#39;table&#39;, 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: &#39;#test&#39;   // ,url:localhostPaht+&#39;userlist.do?page=&#39;+page+&#39;&limit=&#39;+limit+&#39;&selectValue=&#39;+selectValue    ,url:localhostPaht+&#39;userlist.do&#39;    //分页插件    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档    layout: [&#39;limit&#39;, &#39;count&#39;, &#39;prev&#39;, &#39;page&#39;, &#39;next&#39;, &#39;skip&#39;] //自定义分页布局        ,groups: 1 //只显示 1 个连续页码        ,first: false //不显示首页        ,last: false //不显示尾页              }    //显示字段参数    ,cols: [[      {field:&#39;uid&#39;, width:&#39;5%&#39;, title: &#39;ID&#39;, sort: true}      ,{field:&#39;uname&#39;, width:&#39;10%&#39;, title: &#39;用户名&#39;}      ,{field:&#39;sex&#39;, width:&#39;8%&#39;, title: &#39;性别&#39;}      ,{field:&#39;national&#39;, width:&#39;8%&#39;, title: &#39;民族&#39;, sort: true}      ,{field:&#39;age&#39;, width:&#39;8%&#39;, title: &#39;年龄&#39;}      ,{field:&#39;constellation&#39;, title: &#39;星座&#39;, width:&#39;10%&#39;}      ,{field:&#39;unative&#39;, width:&#39;10%&#39;, title: &#39;籍贯&#39;, sort: true}      ,{field:&#39;labeltext&#39;, title: &#39;描述&#39;, width:&#39;20%&#39;}      ,{fixed: &#39;right&#39;, width:&#39;20%&#39;, title: &#39;基本操作&#39;,align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}    ]]     });});</ｓｃｒｉｐｔ></body></html>

后台实现

主要的地方就是page<当前页，比如1页>、limit<当前显示数据，比如10条数据>、count<当前表总数据条数>，其他的事情有layui分页插件来做(jsp页面有该代码)，只要page、limit、count这三个值，分页就能实现

//分页插件    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档    layout: [&#39;limit&#39;, &#39;count&#39;, &#39;prev&#39;, &#39;page&#39;, &#39;next&#39;, &#39;skip&#39;] //自定义分页布局        ,groups: 1 //只显示 1 个连续页码        ,first: false //不显示首页        ,last: false //不显示尾页              }

返回object类型，js会将这个类型当做json数据

@SuppressWarnings("null")@RequestMapping(value = "userlist")@ResponseBodypublic Object userlist(HttpservletRequest request, HttpServletResponse response) {//分页String pageNo=request.getParameter("page");String pagesize=request.getParameter("limit");String uname=request.getParameter("selectValue");HashMap<String, Object> map=new HashMap<String, Object>();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 blocke.printStackTrace();}System.out.println("条数："+list.size());Map<String, Object> result = new HashMap<String, Object>();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;   }

对应的sql

ｓｅｌｅｃｔ 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);

daoimpl的实现

@Overridepublic List<User> selectAlllist(Integer pageNo, Integer pagesize) {// TODO Auto-generated method stubreturn user.selectAlllist(pageNo,pagesize);}

service的实现

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

serviceimpl的实现

@Overridepublic List<User> selectAlllist(Integer pageNo, Integer pagesize) {// TODO Auto-generated method stubreturn usi.selectAlllist(pageNo,pagesize);}

layui分页

本文地址：http://www.wztg.net/wenda/67786.html

免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）