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

原文地址：https://www.jb51.cc/ajax/162621.html