ajax结合豆瓣搜索结果进行分页完整代码
使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。
特点
1、全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。
2、使用了bootstrap的pagination制作页码和panel制作放置结果的面板。
代码如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<linkrel="stylesheet"href="css/bootstrap.css"/><!--换成自己的目录-->
<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/>
</head>
<style>
.pagination>li>a{
cursor:pointer;
}
.pagination>li>span{
margin-left:0;
color:#ccc;
background-color:transparent;
cursor:default;
}
.pagination>li>span:hover{
color:#ccc;
background-color:transparent;
cursor:default;
}
.m20{
margin:20px0;
}
</style>
<body>
<divclass="container-fluid">
<divclass="col-md-12">
<divclass="panelpanel-default">
<divclass="panel-heading">
<formclass="input-group">
<inputtype="text"value="javascript"class="form-control"id="bookName"placeholder="请输入书名"required="required"/>
<spanclass="input-group-btn">
<buttonclass="btn"id="search">搜索</button>
</span>
</form>
</div>
<divclass="panel-body">
<tableclass="tabletable-bordered">
<thead>
<th>书名</th>
<th>作者</th>
<th>出版日期</th>
<th>平均分</th>
<th>价格</th>
</thead>
<tbodyid="tbody">
</tbody>
</table>
</div>
</div>
<divclass="row">
<divclass="col-md-6">
<divid="test"></div>
</div>
<divclass="col-md-4">
<divclass="input-groupm20"><!--保持与#test中的.pagination对齐-->
<inputtype="text"class="form-control"id="page"/>
<spanclass="input-group-btn">
<buttonclass="btnbtn-default"id="jumpToPage">GO</button>
</span>
</div>
</div>
</div>
<divid="result"class="alertalert-info"></div>
</div>
</div>
<scripttype="text/javascript"src="js/jquery-1.11.2.min.js"></script><!--换成自己的目录-->
<scripttype="text/javascript"src="js/bootstrap.js"></script><!--换成自己的目录-->
<scripttype="text/javascript">
varpartPageModule=(function($){
var
initPager=null,//初始换分页函数
setPagerHTML=null,//生成分的页HTML代码
pageClick=null,//每一页按钮的点击事件
ajax=null,//ajax请求后台数据
renderButton=null,
$content=$('')//动态生成的页码
;
/*功能：完成初始化
*@totalPages总页数，从后端获取
*@currentPage当前所在的页数
*/
initPager=function(totalPages,currentPage){
$content=setPagerHTML({
currentPage:currentPage,
totalPages:totalPages,
pageClick:PageClick
})
$('#test').empty().append($content);//得到分页后添加到#test
$('#jumpToPage').click(function(e){//绑定GO按钮的点击事件
e.preventDefault();
PageClick(totalPages,$('#page').val()*1);
})
$('#page').keyup(function(e){//Enter键绑定搜索事件
if(e.keyCode===13){
$('#jumpToPage').trigger('click');
}
})
$('#result').html('你点击的是第'+currentPage+'页')
};
/*功能：页码点击事件。重新生成所有页码，并且使用ajax获取数据
*/
PageClick=function(totalPages,currentPage){
initPager(totalPages,currentPage);
ajax(currentPage);//使用jsonp请求豆瓣
}
ajax=function(currentPage){
var
$input=$('#bookName'),
bookName='',
$tbody=$('#tbody')
//totalPages
;
bookName=$input.val();
if(!bookName){//如果没有输入，就不要发送请求了
$input.focus();
return;
}else{
$.ajax({
type:'get',
url:'https://api.douban.com/v2/book/search',//豆瓣图书api
dataType:'jsonp',
data:{
q:bookName,
start:(parseInt(currentPage)-1)*20||0
},
success:function(data){
var
html='',
books=data.books
;
//totalPages=Math.ceil(data.total/data.count);
books.forEach(function(value,index){
html+='<tr>'
+'<td><ahref="'+value.alt+'">'+value.title+'</a></td>'
+'<td>'+value.author+'</td>'
+'<td>'+value.pubdate+'</td>'
+'<td>'+value.rating.average+'</td>'
+'<td>'+value.price+'</td>'
+'</tr>';
})
$tbody.html(html);
}
})
}
//returntotalPages;
}
setPagerHTML=function(options){
var
currentPage=options.currentPage,
totalPages=options.totalPages,
pageClick=options.pageClick,
$content=$('<ulclass="pagination"></ul>'),
startPage=1,
nextPage=currentPage+1,//不需要考虑超出问题，后面有条件
prevPage=currentPage-1
;
/*逻辑处理，根据点击的不同的页生成不同的ul*/
if(currentPage==startPage){//当前页是起始页
$content.append('<li><span>首页</span></li>');//首页不可用
$content.append('<li><span>上一页</span></li>');//上一页不可用
}else{//不是起始页
$content.append(renderButton(totalPages,1,pageClick,'首页'));//生成首页并绑定事件
$content.append(renderButton(totalPages,prevPage,pageClick,'上一页'));//生成上一页并绑定事件
}
if(totalPages<=5&¤tPage<=5){//总页数小于5，当前页小于5，全部生成页码
for(vari=1;i<=totalPages;i++){
if(i===currentPage){
$content.append('<liclass="active><span>'+i+'</span></li>');//当前页不可点击
}else{
$content.append(renderButton(totalPages,i,pageClick,i));//其他页可以点击
}
}
}elseif(totalPages>5&&totalPages-currentPage<=2){//总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码
$content.append('<li><span>...</span></li>');
for(vari=totalPages-4;i<=totalPages;i++){
if(i===currentPage){
$content.append('<liclass="active"><span>'+i+'</span></li>');
}else{
$content.append(renderButton(totalPages,i,pageClick,i));
}
}
}elseif(totalPages>5&¤tPage>3){//总页数大于5，当前页在中间，前后生成...，生成中间页码
$content.append('<li><span>...</span></li>');
for(vari=currentPage-2;i<currentPage+2;i++){
if(i===currentPage){
$content.append('<liclass="active"><span>'+i+'</span></li>');
}else{
$content.append(renderButton(totalPages,i,pageClick,i));
}
}
$content.append('<li><span>...</span></li>');
}elseif(totalPages>5&¤tPage<=3){//总页数大于5，当前页接近第一页，显示前面页码，后面显示...
for(vari=1;i<=5;i++){
if(i===currentPage){
$content.append('<liclass="active"><span>'+i+'</span></li>');
}else{
$content.append(renderButton(totalPages,i,pageClick,i));
}
}
$content.append('<li><span>...</span></li>');
}
if(currentPage==totalPages){//当前页是末页
$content.append('<li><span>下一页</span></li>');//下一页不可用
$content.append('<li><span>末页</span></li>');//末页不可用
}else{//不是起始页
$content.append(renderButton(totalPages,nextPage,pageClick,'下一页'));//生成首页并绑定事件
$content.append(renderButton(totalPages,totalPages,pageClick,'末页'));//生成上一页并绑定事件
}
return$content;
}
renderButton=function(totalPages,goPageIndex,eventHander,text){
var$gotoPage=$('<li><atitle="第'+goPageIndex+'页">'+text+'</a></li>');
$gotoPage.click(function(){
eventHander(totalPages,goPageIndex);
})
return$gotoPage;
}
return{
init:initPager,
ajax:ajax
}
}(jQuery))
$(function(){
$('#search').click(function(e){
e.preventDefault();
vartotalPage=partPageModule.ajax(1);//由于ajax是异步的，
totalPage=totalPage||65;//所以这个总页数是不准确的。一般这个数据是后端返回的。这里的65是javascript搜索的页数，不同的书籍搜索结果不一样，由于ajax异步执行，所以这里会默认为65。这里不是bug。
partPageModule.init(totalPage,1);
})
$('#bookName').keyup(function(e){
if(e.keyCode===13){
$('#search').trigger('click');
}
})
$('#search').trigger('click');
})
</script>
</body>
</html>
<!--https://api.douban.com/v2/book/search-->
<!--
参数意义备注
q查询关键字q和tag必传其一
tag查询的tagq和tag必传其一
start取结果的offset默认为0
count取结果的条数默认为20，最大为100
-->
参考
参考这里，书中的逻辑处理部分使用的是这里的代码，不过做了修改。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。