分页功能

1.页面

<!-- 右侧内容 -->
        <div class="layui-body" style="margin-left: 20px;margin-right:20px;">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
              <legend>店铺列表</legend>
            </fieldset>
            <!-- 店铺列表 -->
            <div class="layui-form">
              <table class="layui-table">
                    <colgroup>
                      <col width="100">
                      <col width="200">
                      <col width="200">
                      <col width="150">
                      <col width="200">
                      <col>
                    </colgroup>
                    <thead>
                      <tr>
                        <th>编号</th>
                        <th>店铺名称</th>
                        <th>店铺位置</th>
                        <th>管理员</th>
                        <th>操作</th>
                      </tr> 
                    </thead>
                    <tbody id="tbody">
                      
                    </tbody>
              </table>
            </div>
            <div class="fy">
                <a href="javascript:jump(0)">首  页</a>
                <a href="javascript:jump(1)">上一页</a>
                <a href="javascript:jump(2)">下一页</a>
                <a href="javascript:jump(3)">末  页</a>
            </div>
       </div>

2.js

<script type="text/javascript">
    var current=1;
    var up = 0;
    var next = 0;
    var allpages = 0;
    var allcount = 0;
  //引入插件后的第一步是在页面加载事件里对layui插件的element属性进行渲染
  //只有渲染了layui的element属性才能够使用layui的类进行侧边导航的布局
      $(function(){
          layui.use("element");
          getAll(1);
      });
      
      //全查询
      function getAll(current){
          $("#tbody").html("");
          $.ajax({
            type:"post",
            url:"../findAll",
            data:{"current":current},
            dataType:"json",
            success:function(data){
                //分页需要的参数
                up=data.prePage;
                  next=(data.nextPage==0)?1:data.nextPage;
                  allpages=data.pages;
                  current=data.pageNum;
                  allcount=data.total;
                $.each(data.list,function(i,item){
                    var str="<tr><td>" + item.sid + "</td><td>"+item.sname+"</td><td>"+item.address+
                            "</td><td>"+item.uname+"</td><td><a class='yd' href='javascript:yd("+item.cid+")'>预订</a></td></tr>";
                    $("#tbody").append(str);
                });
            }
        });
      }
      
      
      //分页
      function jump(num){
        var curr;
        if(num==0){
            curr=1;
        }else if(num==1){
            curr=up;
            
        }else if(num==2){
            //下一页
            curr=next;
        }else{
            curr=allpages;
        }
        getAll(curr);
    }
  </script>

3.后台

//全查  分页
    @RequestMapping("/findAll")
    @ResponseBody
    public Object findAll(@RequestParam(name="current",defaultValue="1")int current) {
        //当前页号  页面大小
        PageHelper.startPage(current,5);
        //PageHelper.offsetPage(page.getStart(), 5);
        List<UserinfoStore> list = storeService.findAllStore();
        
        //把list放入pageinfo中  其中包含了分页信息
        PageInfo<UserinfoStore> info=new PageInfo<UserinfoStore>(list);
        return info;
    }