把js部分重构了,ajax部分重复,抽出来当一个函数,
另外,把每页大小作为常量了
$(function () {
//初始化第一页数据;
var urlApi = 'http://api.douban.com/v2/movie/top250',
current = 1, // 当前页
pageSize = 10; // 每页大小
var download = function(start) {
console.log(pageSize)
// ajax 请求数据
$.ajax({
url:urlApi,
type:'get',
dataType:'jsonp',
data:{
//从第几条开始请求;
"start" : start,
//请求多少条数据
"count" : pageSize
},
success:function(data) {
//total总条数属性,计算总页数;
var total = parseInt(data.total/10),
result = data.subjects,
str='';
for(var i=0;i<result.length;i++){
var item = result[i];
str += '<li><img src="'+item.images.large
+'" alt=""><p>'+item.title+'</p></li>'
}
//渲染到页面(不使用append)
$('.movieList').html(str);
//分页插件,
$(".tcdPageCode").createPage({
//pageCount:总页数
pageCount:total,
//current:当前页
current:current,
backFn:function(pageIndex){
//单击回调方法,pageIndex是当前页码
$(".movieList").empty();
var start = 10*pageIndex;
current = pageIndex; // 页数
download(start);
}
});
}
})
}
// 请求第一页数据
download(0);
})
你可以自己写个jquery的分页插件,我自己写过一个很简单的...
每页请求多少条数据应该抽象出来,比如你现在改成每页就放5条,改起来很麻烦。