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

思路：页面上动态生成 上一页（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>