分页功能的简单实现。使用模板引擎

2018-12-27 07:42:08来源：博客园阅读 ()

思路：页面上动态生成上一页（i-1）， i - 2，i - 1 ，i， i + 1,， i +2 ，下一页（i+1）。7个按钮。其中 i 是当前页码。

　　　在模板中判断 i - 1 ,i - 2 是否小于0 ，是则不生成按钮。同理判断 i + 1 ，i + 2 是否大于最大页码。

　　在按钮中自定义属性 date - page存储页码。根据页码发送ajax请求获取数据。

代码：

 <script src="../static/assets/vendors/jquery/jquery.js"></script>
 <script src="../static/assets/vendors/art-template/template-web.js"></script> //引入模板引擎
 <script type = "text/template" id = "pageList">
    {{if(currentPage - 1 > 0)}}<li data-page="{{currentPage - 1}}"><a href="#">上一页</a></li> {{/if}}
    {{if(currentPage - 2 > 0)}}<li data-page="{{currentPage - 2}}"><a href="#">{{currentPage - 2}}</a></li>{{/if}}
    {{if(currentPage - 1 > 0)}}<li data-page="{{currentPage - 1}}"><a href="#">{{currentPage - 1}}</a></li>{{/if}}
    <li class = "active" data-page="{{currentPage}}"><a href="#" >{{currentPage}}</a></li>
    {{if(currentPage + 1 <= maxPage)}}<li data-page="{{currentPage + 1}}"><a href="#">{{currentPage + 1}}</a></li>{{/if}}
    {{if(currentPage + 2 <= maxPage)}}<li data-page="{{currentPage + 2}}"><a href="#">{{currentPage + 2}}</a></li>{{/if}}
    {{if(currentPage + 1 <= maxPage)}}<li data-page="{{currentPage + 1}}"><a href="#">下一页</a></li>{{/if}}
  </script>

 $(function(){
      //页面初始化
      var currentPage = 1;
      var pageSize = 20;
　　　　//参数1（页码）参数2（每页数据条数）
      function getPostData(currentPage,pageSize){
        $.ajax({
          type:"post",
          url:"./api/getPosts.php",
          data:{
            currentPage:currentPage,
            pageSize:pageSize
          },
          dataType:"json",
          success:function(res){
            if(res.code == 1){
              var maxPage = Math.ceil(res.count/pageSize); //res.count 后台返回的数据总条数
              var page_html = template("pageList",{currentPage:currentPage,maxPage:maxPage}); //调用模板引擎生成 html 结构
              $(".pagination").html(page_html); //注意 不能使用 appendTo()追加。html() 相当于局部刷新
            }
          }
        });
      }

      getPostData(currentPage,pageSize);

      $(".pagination").on("click","li",function(){
　　　　　　//如果点击当前页码 return false
        if(currentPage == parseInt( $(this).attr("data-page"))){
          return false;
        }else{
          currentPage = parseInt( $(this).attr("data-page"));
        }
        getPostData(currentPage,pageSize);
      });
    });

  </script>