页面上经常需要很多的数据来展示，这时候我们不可能在一个页面上显示全部的内容，这个时候就需要引入翻页了。为了使每次翻页页面都不刷新，我们要使用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 //排序原则
分页请求方式流程
请求后台数据接口获取初始化数据
分析数据看是否需要构建分页。
-
推荐使用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){ // 构建页面 }