使用laypage插件分页

最新推荐文章于 2023-10-09 18:40:50 发布

auron_yao

最新推荐文章于 2023-10-09 18:40:50 发布

阅读量679

点赞数

CC 4.0 BY-SA版权

文章标签： laypage 前端分页插件

本文链接：https://blog.youkuaiyun.com/qq_36743920/article/details/79905245

本文介绍了如何使用laypage前端分页插件，包括设置分页元素、准备工作、页面加载后的数据请求以及根据服务器返回数据绘制表格和展示分页效果。

引入脚本样式不再赘述，直接进入正题

用作分页显示的元素

<div id="lay_page"></div>

为分页做准备

    // 创建变量并初始化，为翻页提供支持
    var pageConfig = {
    	pageNum: 1, 
    	pageSize: 10, 
    	total: 0,
    	categoryUid: "rootCategory", // 这是一个查询条件
    	proName: ""
    }

页面加载后向服务器请求数据

    $(function() {
       getInfo();
    });

    /* 向服务器请求数据   */
    function getInfo() {
    	$.ajax({
    		url: common.getPath() + "/demo/getData",
    		type: "post",
    		dataType: "json",
    		data: {
    			"pageNum": pageConfig.pageNum,
    			"pageSize": pageConfig.pageSize,
    			"categoryUid": pageConfig.categoryUid,
    			"proName": $('#proName_input').val().trim()
    		},
    		success: function(result) {
    			if (result.status == 0) {
    			        // 根据返回的参数绘制table
                                drawTable(result.data);
    			}
    		}
    	});
    }

根据服务器返回的数据绘制表单，根据返回的信息展示分页插件

    // 请求数据成功,画表单，渲染分页控件
    function drawTable(pageInfo) {
        // 记录服务器返回的分页相关参数，用于分页控件渲染
        pageConfig.pageNum = pageInfo.pageNum;  
    	pageConfig.pageSize = pageInfo.pageSize;
    	pageConfig.total = pageInfo.total;
    	
        // 渲染分页控件
    	doPage();
    	
    	// 清空表格数据
    	$("#table_tbody").html('');
    	if (pageInfo.total == 0) {
    		return;
    	}
    	// 填充表格数据
    	var list = pageInfo.list;
    	var startSort = pageInfo.startRow;//开始序号
    	var trs = "";
    	for(var i=0; i<list.length; i++) {
    		var meta = list[i];
    		var sortNum = startSort + i;
            
    		trs += '<tr><td><input type="checkbox" name="pro_check" value="' + meta.categoryUid + '" lay-skin="primary">'+ sortNum +'</td>'
    		            + '<td>'+meta.proName+'</td>'
    		            + '<td>'+meta.proAppId+'</td>'
    		            + '<td>'+meta.proUid+'</td>'
    		            + '<td>'+meta.creatorFullName+'</td>'
    		            + '<td>'+createTime+'</td>'
    		            + '<td>'+meta.updatorFullName+'</td>'
    		            + '<td>'+updateTime+'</td>'
    		            + '</tr>';
    	}
    	$("#table_tbody").append(trs);
    	
    }    
    // 渲染分页控件
    function doPage() {
        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage,layer = layui.layer;  
            
            laypage.render({
                elem: 'lay_page',  // 作为分页信息的元素
                curr: pageConfig.pageNum, // 当前页码，服务器返回的
                count: pageConfig.total,  // 总记录数，服务器返回的
                limit: pageConfig.pageSize,  // 每页数，服务器返回的
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function(obj, first){
                    // 点击新页码自动进入此方法，obj包含了点击的页数的信息  
                    pageConfig.pageNum = obj.curr;
                    pageConfig.pageSize = obj.limit;
                    if (!first) {
                        getInfo(); // 如果不是第一次，向服务器请求参数->渲染分页插件，循环
                    }
                }
            }); 
        });
    }