页面上经常需要很多的数据来展示，这时候我们不可能在一个页面上显示全部的内容，这个时候就需要引入翻页了。为了使每次翻页页面都不刷新，我们要使用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.这个插件的具体参数使用可以查看，

配合使用

首先要先说下，对应的后台接口：

// 数据请求接口    GET /v1/list/?filters=
    
     &index=
     
      &limit=
      
       &order=
       
        &sortBy=
        
            filters //搜索条件     index //第几页   limit //一页显示几个   order //排序方式   sortBy //排序原则
        
       
      
     
    

分页请求方式流程

1. 请求后台数据接口获取初始化数据

2. 分析数据看是否需要构建分页。

3. 推荐使用等模板工具来构建页面。

   //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){    // 构建页面 }