结合豆瓣搜索结果进行分页（完整）
使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。
特点
1，全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。
2，使用了bootstrap的pagination制作页码和panel制作放置结果的面板。
代码如下
<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"><input type="text" class="form-control" id="page"/><span class="input-group-btn"><button class="btn btn-default" id="jumpToPage">GObutton>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',// 豆瓣图书apidataType: '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 += ''+ ' + value.alt + '">' + value.title + ' '+ '' + value.author + ' '+ '' + value.pubdate + ' '+ '' + value.rating.average + ' '+ '' + value.price + ' '+ ' '; })$tbody.html( html );}})}// return totalPages;}setPagerHTML = function ( options ) {var currentPage = options.currentPage,totalPages = options.totalPages,pageClick = options.pageClick,$content = $('
'),startPage = 1,nextPage = currentPage + 1,//不需要考虑超出问题，后面有条件prevPage = currentPage - 1;/* 逻辑处理，根据点击的不同的页生成不同的ul */if ( currentPage == startPage ) {//当前页是起始页$content.append( '首页 ' ); // 首页不可用$content.append( '上一页 ' ); // 上一页不可用} 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( '' ' );// 当前页不可点击} else {$content.append( renderButton( totalPages, i, pageClick, i) );// 其他页可以点击}}} else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码$content.append( '... ' );for( var i = totalPages - 4; i <= totalPages; i++ ) {if ( i === currentPage ) {$content.append( '' + i + ' ' );} else {$content.append( renderButton( totalPages, i, pageClick, i) );}}} else if ( totalPages > 5 && currentPage > 3) {// 总页数大于5，当前页在中间，前后生成...，生成中间页码$content.append( '... ' );for ( var i = currentPage - 2; i < currentPage + 2; i++ ) {if ( i === currentPage ) {$content.append( '' + i + ' ' );} else {$content.append( renderButton( totalPages, i ,pageClick, i) );}}$content.append( '... ' );} else if ( totalPages > 5 && currentPage <= 3 ) {// 总页数大于5，当前页接近第一页，显示前面页码，后面显示...for ( var i = 1; i <= 5; i++ ) {if ( i === currentPage ) {$content.append( '' + i + ' ' );} else {$content.append( renderButton( totalPages, i ,pageClick, i) );}}$content.append( '... ' );}if ( currentPage == totalPages ) {//当前页是末页$content.append( '下一页 ' ); // 下一页不可用$content.append( '末页 ' ); // 末页不可用} else { // 不是起始页$content.append( renderButton( totalPages, nextPage, pageClick, '下一页') ); // 生成首页并绑定事件$content.append( renderButton( totalPages, totalPages, pageClick, '末页') ); // 生成上一页并绑定事件}return $content;}renderButton = function ( totalPages, goPageIndex, eventHander, text ) {var $gotoPage = $( ''页">' + text + '' );$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>
参考
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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！