平武建站

如何使用ajax结合豆瓣搜索结果进行分页

这篇文章给大家分享的是有关如何使用ajax结合豆瓣搜索结果进行分页的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

作为一家“创意+整合+营销”的成都网站建设机构，我们在业内良好的客户口碑。成都创新互联提供从前期的网站品牌分析策划、网站设计、网站建设、成都网站建设、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。

使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。

特点

1、全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。
2、使用了bootstrap的pagination制作页码和panel制作放置结果的面板。

代码如下



 
 
 
 
 
 
 
 

 

 
  
  
  
  
  
   搜索
  
  
  
            书名    作者    出版日期    平均分    价格               
  
       
                 GO                           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 += ''    + '' + 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( '' + i + '' );// 当前页不可点击   } 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' );  })    

    感谢各位的阅读！关于“如何使用ajax结合豆瓣搜索结果进行分页”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


    文章题目：如何使用ajax结合豆瓣搜索结果进行分页
    文章起源：http://pwwzsj.com/article/gehicp.html

    其他资讯