layui服务器端分页实例

矫情吗；* 2022-12-29 14:21 258阅读 0赞

layui的分页功能是很不错的，方便快捷。jquery普通页面开发可以考虑。下面以表格为例，举例layui分页功能。其他（利于list等）同理。首先将layui.css、layui.all.js引入在页面中。

官网（下载地址）：[https://www.layui.com/][https_www.layui.com]

1.html页面

<table class="layui-table" lay-even="" lay-skin="row">
        <thead>
            <tr>
                <th>登录名</th>
                <th>用户组</th>
                <th>姓名/昵称</th>
                <th>创建日期</th>
                <th>操作</th>
            </tr> 
        </thead>
        <tbody>
     
        </tbody>
    </table>
    <div id="demo1"></div>    //调用分页的html代码

2.初始化数据每页显示的条数，当前页数（如果想要搜索等功能，也可以初始化搜索内容的字段 var searchVal=''）

var totalData=0 //表格数据总数
     
    var currentPage=1 //当前页数
     
    var pageLimit=10 //每页显示数据条数
     
    handleData(currentPage,pageLimit,searchVal) //刚进页面初始化表格
     
    topage() //分页

3.封装页面渲染的ajax请求，注意调用的时候参数的顺序问题。3,4步可以合并，看自己的风格。

function handleData(data1,data2){                    
      $.ajax({
        type:"get",
        url:window.baseUrl+'/backend/users/',
        data:{page:data1, pageSize:data2},
        success:function(data){
            // console.log(data)
             dataList=data.data.users 
             renderData(dataList)
        }
      })
    }

4.封装渲染表格的方法

function renderData(data){                //渲染表格数据，获取datalist
      $("tbody").html('')                     //以下是根据自己的需求将数据添加到页面中的方法
      for(var i=0;i<data.length;i++){         //此处可以用foreach函数代替，更为简洁
            $("tbody").append(`<tr>    
                  <td>${data[i].name}</td>
                  <td>${data[i].group_str}</td>
                  <td>${data[i].nickname}</td>
                  <td>${data[i].created}</td>
                  <td>
                    <button data-id="${data[i].id}"  class="btn layui-btn-normal btn-xs checkout"   data-toggle="modal" data-target="#myModal1">查看</button>
                    <button data-id="${data[i].id}" class="btn layui-btn-normal btn-xs update"   data-toggle="modal" data-target="#myModal2">编辑</button>
                    <button data-id="${data[i].id}" class="btn btn-danger btn-xs delete">删除</button>                   
                  </td> 
            </tr>`)              //按钮的data-id是为了获取当前行的id，定位此行，封装方法进行操作
          }
    }

4.分页功能

5.举例操作按钮的实现，其他功能同理

$("table").on("click",'.delete',function(){      //删除按钮
        dataId=$(this).attr("data-id")
        console.log(dataId)
        layer.open({
            content: '确定要删除吗'
            ,btn: ['取消', '确定']
            ,yes: function(index, layero){
              layer.close(index)
            }
            ,btn2: function(index, layero){
              $.ajax({
                  type:"get",
                  data:{user_id:dataId},
                  url:window.baseUrl+'/backend/user/deletes/',
                  success:function(data){
                      console.log(data)
                      $("button[data-id='"+dataId+"']").parents('td').parents('tr').remove() 
                      handleData(currentPage,pageLimit)     
                      topage()     
                  }
                })
            }
      
          });
     
    })

[https_www.layui.com]: https://www.layui.com/