侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 4年前   198

使用豆瓣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="//article/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="//article/js/jquery-1.11.2.min.js" ></script> <!-- 换成自己的目录 --> <script type="text/javascript" src="//article/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="//article/' + 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跨页面提交表单
    下一条:
    电脑开机时进入并在BIOS里设置硬盘启动的方法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客