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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/ajax/162621.html

猜你在找的Ajax相关文章