ajax與jquery-pagination實現異步翻頁功能

頁面上常常須要不少的數據來展現，這時候咱們不可能在一個頁面上顯示所有的內容，這個時候就須要引入翻頁了。爲了使每次翻頁頁面都不刷新，咱們要使用ajax來進行異步的數據加載。

ajax使用

對ajax還不太熟悉的能夠查看這裏，下面是我經常使用的方式，把ajax寫在工具類中，而後去調用使用。

function ajax(url_,type_,data_,callback){
        $.ajax({
          type : type_,         // 請求方式。   
          url : url_,           // 發送請求的地址。    
          dataType : 'jsonp',   // 預期服務器返回的數據類型。
          data : data_,         // 發送到服務器的數據。
          success : function(json){
              callback(json); 
          },
          error : function(json){
              callback(json);
          }  
        })    
  }
  // 使用
  ajax(url,"post",{
    data : data_
  },function(json){
    console.log(json)
  })

jauery-pagination介紹

1.這個插件的具體參數使用能夠查看這裏，
2.我使用的是Bootstrap Pagination，配合項目使用的Bootstrap前端框架使用很是方便。

配合使用

首先要先說下，對應的後臺接口：

// 數據請求接口 
   GET /v1/list/?filters=<filters>&index=<index>&limit=<limit>&order=<order>&sortBy=<sortBy>
   filters //搜索條件  
   index //第幾頁
   limit //一頁顯示幾個
   order //排序方式
   sortBy //排序原則

分頁請求方式流程

1. 請求後臺數據接口獲取初始化數據

2. 分析數據看是否須要構建分頁。

3. 推薦使用handlebars等模板工具來構建頁面。

   //tool.js
    tool.getList = {
        apple : function(filters,index,limit,callback){
            ajax(url,'get',{
              filters : filters,
              index : index,
              limit : limit,
              order : 'desc',
              sortBy : 'number' 
            },function(json){
              callback(json);
            })  
        }
    }
    //appleList.js
    function appleList(index,filters){
        tool.getList.apple(filters,index,6,function(json){
             if(json.succeed && json.data['appleList']){
               
               var count = json.data['count'],
                   list = json.data['appleList'];
                   
               pagination(index,count,list);
             }else{
               //無數據
             }
        }) 
    }
    
    function pagination(index,count,list){
        if(index = 0){
           var num = Math.ceil(count/ 6);  //計算頁數
             $("#listPagination").bs_pagination({
                  currentPage: 1,
                  showGoToPage: false,
                  showRowsPerPage: false,
                  showRowsInfo: false,
                  visiblePageLinks: 10,
                  totalPages: num,
                  onChangePage: function(event, data) {
                      appleList(data.currentPage,'');
                  },
                  onLoad: function(event, data) {
                      html(list);
                  }
                })
           if(num){
           }else{
             html(list);
           }
        }else{
          html(list);
        }
    }
    
    function html(list){
       // 構建頁面
    }