ajax结合豆瓣搜索结果进行分页完整代码

来源：动视网责编：小OO 时间：2020-11-27 20:08:17

ajax结合豆瓣搜索结果进行分页完整代码

使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。特点；1，全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。2，使用了bootstrap的pagination制作页码和panel制作放置结果的面板。代码如下；

推荐度：

点击下载本文 文档为doc格式

导读使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。特点；1，全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。2，使用了bootstrap的pagination制作页码和panel制作放置结果的面板。代码如下；

这篇文章主要为大家详细介绍了ajax结合豆瓣搜索结果进行分页完整代码，具有一定的参考学习ajax的价值，对ajax感兴趣的朋友可以参考一下

特点

　　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>

 <p class="container-fluid">

 <p class="col-md-12">
 <p class="panel panel-default">
 <p 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>
 </p>
 <p 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>
 </p>
 </p>

 <p class="row">
 <p class="col-md-6">
 <p id="test"></p>
 </p>

 <p class="col-md-4">
 <p 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>
 </p>
 </p>
 </p>

 <p id="result" class="alert alert-info"></p>
 </p>
 </p>


 <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
-->

ajax结合豆瓣搜索结果进行分页完整代码

推荐度：

点击下载本文 文档为doc格式

标签：数据豆瓣实现

热门焦点

ajax结合豆瓣搜索结果进行分页完整代码

ajax结合豆瓣搜索结果进行分页完整代码

ajax结合豆瓣搜索结果进行分页完整代码

最新推荐

猜你喜欢

热门推荐