分頁功能的簡單實現。使用模板引擎

思路：頁面上動態生成 上一頁（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>