使用laypage插件分页

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

用作分页显示的元素

为分页做准备

    // 创建变量并初始化，为翻页提供支持
    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'+ sortNum +''
    		            + ''+meta.proName+''
    		            + ''+meta.proAppId+''
    		            + ''+meta.proUid+''
    		            + ''+meta.creatorFullName+''
    		            + ''+createTime+''
    		            + ''+meta.updatorFullName+''
    		            + ''+updateTime+''
    		            + '';
    	}
    	$("#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(); // 如果不是第一次，向服务器请求参数->渲染分页插件，循环
                    }
                }
            }); 
        });
    }