DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> ajax結合豆瓣搜索結果進行分頁完整代碼
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
-->  

 

參考

http://bbs.csdn.net/topics/390734775?page=1 書中的邏輯處理部分使用的是這裡的代碼,不過做了修改。
效果展示

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved