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


            });
        };