laypage分页

预览：

1.引入laypage所需的js和css文件

<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.all.js"></script>
<!--这里换成你的路径-->

2.html代码

<!--当前页码-->
<input type="hidden" id="pageNum_member" name="pageNum" value="1"/>
<!--每页显示条数-->
<input type="hidden" id="pageSize_member" name="pageSize" value="10"/>

<!--总数据条数，从后台传过来-->
<input type="hidden" id="count_member" value="${count_member!}"/>

<!--分页插件容器-->
<div class="paging t_r l_h65 c_222" id="pageDiv_member">

</div>

3.js

// 该方法放到页面初始化方法中引用
function queryMemberForm() {
    // 获取后台数据
    $.post("../groupCertificateMember/list", $("#groupMemberInfoForm").serialize(), function (data) {
        showMemberPage();
    });
}

function showMemberPage() {
    // 数据总数
    var countData = $("#count_member").val();
    // 当前页码
    var currPage = $("#pageNum_member").val();
    // 每页显示条数
    var limitCount = $("#pageSize_member").val();
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        laypage.render({
            elem: 'pageDiv_member' // 这里的ID，不用加 # 号
            , count: countData
            , curr: currPage
            , limit: limitCount
            , limits:[10,20,30,40,50]
            , layout: ['count','prev', 'page', 'next','limit','refresh','skip']
            , jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    $("#pageNum_member").val(obj.curr);
                    $("#pageSize_member").val(obj.limit);
                    showMemberFeild();
                }
            }
        });
    });
}