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