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

使用豆瓣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
-->

 

参考

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ajax
分页
ajax分页、jquery ajax分页插件、ajax分页实例、ajax分页插件、pagination ajax分页，以便于您获取更多的相关知识。

时间： 2024-08-02 07:12:31

ajax结合豆瓣搜索结果进行分页完整代码_AJAX相关的相关文章

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

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

Ajax实现无闪烁定时刷新页面实例代码_AJAX相关

在Web开发中我们经常需要实现定时刷新某个页面: 1.来保持session的值或者检查session的值是否为空(比如说防止同一用户重复登录): 2.实现实时站内短信: 3.定时更新页面数据等等.但是我们在网上搜搜会发现有很多定时刷新页面的方法,最简单的就是在<head></head>标记之间加上如下代码: 在<head></head>标记之间加上代码,实现定时刷新,此代码我已经测试过,可以实现效果 <meta http-equiv="ref

js实现ajax分页完整实例_AJAX相关

本文实例讲述了js实现ajax分页的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

asp.net+Ajax 文本文件静态分页实现代码_AJAX相关

服务端部分 ,文本文件分页的类.主要在流中处理.当然我看过网上的用</br> 关键字进行分页的 个人觉得不是所有时候都能满足要求,所一自己写了这个,还是费了点时间,主要在于本人太笨,基础很差.希望大家个出更好的建议 复制代码 代码如下: using System; using System.Collections.Generic; using System.Text; using System.IO; namespace Txt { public class TxtPager { public

asp+ajax实现静态页面分页的代码_AJAX相关

最近因工作需要,要在静态页面上实现分页,想了下,决定用AJAX来实现,所以就捣鼓了下面这么个东西,截图如下: 复制代码 代码如下: <html> <head> <title>AJAX静态分页</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css&quo

用Ajax来控制书签和回退按钮的代码_AJAX相关

这篇文章描述了一个支持Ajax应用书签和回退按钮的开源的javascript库.在这个指南的最后,开发者将会得出一个甚至不是Google Maps 或者 Gmail那样处理的Ajax的解决方案:健壮的,可用的书签和向前向后的动作能够象其他的web页面一样正确的工作. Ajax:怎样去控制书签和回退按钮 这篇文章说明了一个重要的成果,Ajax应用目前面对着书签和回退按钮的应用,描述了非常简单的历史库(Really Simple History),一个开源的解决这类问题的框架,并提供了一些能够运行的

ajax+asp无限级分类树型结构的代码_AJAX相关

复制代码 代码如下: <% '数据库字段为类属性,添加.删除.修改.操作检查等函数为类的方法 Class Cls_Leibie     Private nClassID,sClassName,nParentID,sParentPath,nDepth,nRootID,nChild,nOrderID,sFilePath '定义私有变量(类的属性,即数据库字段对应的变量)     Private rs,sql,ErrorStr     Private Sub Class_Initialize()   

ajax jquery校验用户是否已经注册演示代码_AJAX相关

服务端代码这里就不贴了 html代码比较简单,需要自行引入jquery库 复制代码 代码如下: <body> 请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" /> <div id

JavaWeb中的简单分页完整代码(推荐)_java

这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action="pageServlet"> 用户名:<input type="text" name="username"><br> 密 码:<input type="text" name="passwo