layui服务器端分页实例

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

官网（下载地址）：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.分页功能

function topage(){                                //分页操作
  $.ajax({                                        //获取数据总数
    type:"get",
    url:window.baseUrl+'/backend/users/',
    data:{page:currentPage, pageSize:pageLimit},
    success:function(data){
        totalData=data.data.total
        layui.use(['element','laypage', 'layer'], function(){
        var $ = layui.jquery;
        var element = layui.element;
        var laypage = layui.laypage
        ,layer = layui.layer;
        //总页数大于页码总数
        laypage.render({
          elem: 'demo1'
          ,count: totalData //数据总数
          ,limit:pageLimit
          ,jump: function(obj,first){
              //obj包含了当前分页的所有参数，比如：
              var curr=obj.curr
              var limit=obj.limit
              // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
              // console.log(obj.limit); //得到每页显示的条数
              if(!first){                
                handleData(curr,limit)
              }  
          }
        });
      })
         
    }
  })

}

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()     
              }
            })
        }
  
      });

})

layui服务器端分页实例

猜你喜欢