LayUI 实现分页

     <div class="admin-main">
		<blockquote class="layui-elem-quote">
        	<form class="layui-form" action="" >
        		<div class="layui-form-item">
       				 <div class="layui-input-inline">
            			<input type="text" id="selectValue" lay-verify="required" placeholder="学员姓名，手机号" autocomplete="off" class="layui-input">
       				 </div>
       				<button class="layui-btn" type="button" id="selectButton">搜索</button>
        		</div>
        	</form>
        <!-- <span><a href="shop_customer_manager_page_info">显示所有客户</a></span> -->
        </blockquote>
        <fieldset class="layui-elem-field">
            <legend>学员列表</legend>
            <div class="layui-field-box layui-form">
                <table class="layui-table admin-table" id="t_customerInfo">

                </table>
            </div>
        </fieldset>
        <div class="admin-table-page">
            <div id="paged" class="page">
            </div>
        </div>
    </div>

    $(document).ready(function(){
              //ajax请求后台数据
              getShopCustomerManagePageInfo();


              //点击搜索时 搜索数据
              $("#selectButton").click(function(){ 
                getShopCustomerManagePageInfo();
                currentPageAllAppoint = 1; //当点击搜索的时候，应该回到第一页
                toPage();//然后进行分页的初始化

              })
           toPage();
        });

        //分页参数设置 这些全局变量关系到分页的功能
        var startAllAppoint = 0;
        var limitAllAppoint = 8;
        var currentPageAllAppoint = 1;
        var total = 0;
        var dataLength = 0;
        //ajax请求后台数据
        function getShopCustomerManagePageInfo(){
            $.ajax({
                type:"post",
                async:false,
                url:"${pageContext.request.contextPath}/JR/StuList.action",
                data:{start:startAllAppoint, limit:limitAllAppoint,selectValue:$("#selectValue").val()},
                success:function(data,status){
                    getShopCustomesInfo(data.root);
                    startAllAppoint = data.currentPage;//当前页数(后台返回)
                    
                    total = data.total;//总页数(后台返回)
                  
                }
            });

        }
        function getShopCustomesInfo(data){
            var s = "<tr><th>学号</th><th>姓名</th><th>性别</th><th>电话</th><th>邮箱</th></tr>";
            $.each(data,function(v,o){
                    s+='<tr><td>'+o.no+'</td>';
                    s+='<td>'+o.name+'</td>';
                     s+='<td>'+o.sex+'</td>';
                    s+='<td>'+o.phone+'</td>';
                    s+='<td>'+o.email+'</td>';                   
            });
            if(data.length>0){
                $("#t_customerInfo").html(s);
            }else{
                $("#page1").hide();
                $("#t_customerInfo").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
            }


        }
        function toPage(){

            layui.use(['form', 'laypage', 'layedit','layer', 'laydate'], function() {
                var form = layui.form,
                    layer = layui.layer,
                    layedit = layui.layedit,
                    laydate = layui.laydate,
                    laypage = layui.laypage;

                var nums = 10;
                //调用分页
             
                  laypage.render({
                    elem: 'paged'
                    ,count: total //得到总页数，在layui2.X中使用count替代了，并且不是使用"总页数"，而是"总记录条数"
                    ,curr: currentPageAllAppoint
                    ,jump: function(obj, first){

                        currentPageAllAppoint = obj.curr;
                        startAllAppoint = (obj.curr-1)*limitAllAppoint;
                      //document.getElementById('biuuu_city_list').innerHTML = render(obj, obj.curr);
                      if(!first){ 
                      	
                      	getShopCustomerManagePageInfo(); 
                      }
                    }
                  });


            });
        };