使用豆瓣api，得到分頁結(jié)果。相當于從后臺數(shù)據(jù)庫獲得的結(jié)果一樣。所不同的是，沒法事先知道頁數(shù)。雖然通過請求api可以獲得總頁數(shù)，但由于ajax是異步的，所以對于分頁一開始就要給出總頁數(shù)來說，這是沒有意義的。我使用了一個固定總頁數(shù)65（正是搜索javascript書籍返回的總頁數(shù)）。所以其他書籍是并不是65頁，會出現(xiàn)多頁或者少頁的情況，這并不是bug。
!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,// 初始換分頁函數(shù)
setPagerHTML = null,// 生成分的頁HTML代碼
pageClick = null,// 每一頁按鈕的點擊事件
ajax = null, // ajax請求后臺數(shù)據(jù)
renderButton = null,
$content = $( '' ) // 動態(tài)生成的頁碼
;
/* 功能：完成初始化
* @totalPages 總頁數(shù)，從后端獲取
* @currentPage 當前所在的頁數(shù)
*/
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獲取數(shù)據(jù)
*/
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 ) { // 如果沒有輸入，就不要發(fā)送請求了
$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
;
/* 邏輯處理，根據(jù)點擊的不同的頁生成不同的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 ) {// 總頁數(shù)小于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 ) {// 總頁數(shù)大于5，當前頁接近總頁數(shù)，前面顯示...,后面顯示到結(jié)尾的頁碼
$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) {// 總頁數(shù)大于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 ) {// 總頁數(shù)大于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;// 所以這個總頁數(shù)是不準確的。一般這個數(shù)據(jù)是后端返回的。這里的65是javascript搜索的頁數(shù)，不同的書籍搜索結(jié)果不一樣，由于ajax異步執(zhí)行，所以這里會默認為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 -->
!--
參數(shù) 意義 備注
q 查詢關(guān)鍵字 q和tag必傳其一
tag 查詢的tag q和tag必傳其一
start 取結(jié)果的offset 默認為0
count 取結(jié)果的條數(shù) 默認為20，最大為100
-->
