欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 21:06:03
使用豆瓣api,得到分页结果。相当于从后台数据库获得的结果一样。所不同的是,没法事先知道页数。虽然通过请求api可以获得总页数,但由于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
-->  

 

参考

书中的逻辑处理部分使用的是这里的代码,不过做了修改。
效果展示

https://yuwanlin.github.io/general/%e5%88%86%e9%a1%b5/%e7%bb%93%e5%90%88%e8%b1%86%e7%93%a3%e6%90%9c%e7%b4%a2%e7%bb%93%e6%9e%9c%e8%bf%9b%e8%a1%8c%e5%88%86%e9%a1%b5.html