ajax结合豆瓣搜索结果进行分页完整代码

前端开发 得得之家
这篇文章主要为大家详细介绍了ajax结合豆瓣搜索结果进行分页完整代码，具有一定的参考价值，感兴趣的朋友可以参考一下

使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。

特点

1、全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。
2、使用了bootstrap的pagination制作页码和panel制作放置结果的面板。 　　

代码如下


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="css/bootstrap.css" /><!-- 换成自己的目录 -->
 <meta name="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: 20px 0;
 }

 </style>
 <body>

 <div class="container-fluid">

 <div class="col-md-12">
  <div class="panel panel-default">
  <div class="panel-heading">
  <form class="input-group">
  <input type="text" value="javascript" class="form-control" id="bookName" placeholder="请输入书名" required="required"/>
  <span class="input-group-btn">
   <button class="btn" id="search">搜索</button>
  </span>
  </form>
  </div>
  <div class="panel-body">
  <table class="table table-bordered">
  <thead>
   <th>书名</th>
   <th>作者</th>
   <th>出版日期</th>
   <th>平均分</th>
   <th>价格</th>
  </thead>
  <tbody id="tbody">

  </tbody>
  </table>
  </div>
  </div>

 <div class="row">
  <div class="col-md-6">
  <div id="test"></div>
  </div>

  <div class="col-md-4">
  <div class="input-group m20"><!-- 保持与#test中的.pagination对齐 -->
  <input type="text" class="form-control" id="page"/>
  <span class="input-group-btn">
  <button class="btn btn-default" id="jumpToPage">GO</button>
  </span>
  </div>
  </div>
 </div>

 <div id="result" class="alert alert-info"></div>
 </div>
 </div>


 <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <!-- 换成自己的目录 -->
 <script type="text/javascript" src="js/bootstrap.js" ></script> <!-- 换成自己的目录 -->
 <script type="text/javascript">
 var partPageModule = ( 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><a href="' + 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 );
  }
  })
 }

// return totalPages;
 }

 setPagerHTML = function ( options ) {
 var 
  currentPage = options.currentPage,
  totalPages = options.totalPages,
  pageClick = options.pageClick,
  $content = $('<ul class="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 && currentPage <= 5 ) {// 总页数小于5，当前页小于5，全部生成页码
  for ( var i = 1; i <= totalPages; i++ ) {
  if( i === currentPage ) {
  $content.append( '<li class="active><span>' + i + '</span></li>' );// 当前页不可点击
  } else {
  $content.append( renderButton( totalPages, i, pageClick, i) );// 其他页可以点击
  }
  }
 } else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码
  $content.append( '<li><span>...</span></li>' );
  for( var i = totalPages - 4; i <= totalPages; i++ ) {
  if ( i === currentPage ) {
  $content.append( '<li class="active"><span>' + i + '</span></li>' );
  } else {
  $content.append( renderButton( totalPages, i, pageClick, i) );
  }
  }
 } else if ( totalPages > 5 && currentPage > 3) {// 总页数大于5，当前页在中间，前后生成...，生成中间页码
  $content.append( '<li><span>...</span></li>' );
  for ( var i = currentPage - 2; i < currentPage + 2; i++ ) {
  if ( i === currentPage ) {
  $content.append( '<li class="active"><span>' + i + '</span></li>' );
  } else {
  $content.append( renderButton( totalPages, i ,pageClick, i) );
  }
  }
  $content.append( '<li><span>...</span></li>' );
 } else if ( totalPages > 5 && currentPage <= 3 ) {// 总页数大于5，当前页接近第一页，显示前面页码，后面显示...
  for ( var i = 1; i <= 5; i++ ) {
  if ( i === currentPage ) {
  $content.append( '<li class="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><a title="第' + 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();
 var totalPage = 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 查询的tag  q和tag必传其一
 start 取结果的offset 默认为0
 count 取结果的条数  默认为20，最大为100
-->

参考

参考这里，书中的逻辑处理部分使用的是这里的代码，不过做了修改。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持得得之家。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

详解Ajax跨域（jsonp） 调用JAVA后台
本篇文章主要介绍了详解Ajax跨域（jsonp） 调用JAVA后台 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React+ajax+java实现上传图片并预览功能
这篇文章主要介绍了React+ajax+java实现上传图片并预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax提交到java后台之后处理数据的实现
下面小编就为大家带来一篇ajax提交到java后台之后处理数据的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于ajax的使用方法_例题、ajax的数据处理
下面小编就为大家带来一篇关于ajax的使用方法_例题、ajax的数据处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ajax实现分页查询功能
这篇文章主要为大家详细介绍了ajax实现分页查询功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax实现加载数据功能
这篇文章主要为大家详细介绍了ajax实现加载数据功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端开发编程语言数据库服务器系统/运维网络/安全移动开发建站教程网站运营
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式