使用豆瓣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-->
新聞熱點
疑難解答
圖片精選
