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 -->
参考
参考这里,书中的逻辑处理部分使用的是这里的代码,不过做了修改。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。