ajax与jquery-pagination实现异步翻页功能

LuDongWei

页面上经常需要很多的数据来展示,这时候我们不可能在一个页面上显示全部的内容,这个时候就需要引入翻页了。为了使每次翻页页面都不刷新,我们要使用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){
        // 构建页面
     }
     
    
      
      
      
           
阅读 7.5k

笔记与心得
记录自己在前端开发中碰到的事物。

英语不擅长的前端工作者

620 声望
20 粉丝
0 条评论

英语不擅长的前端工作者

620 声望
20 粉丝
文章目录
宣传栏