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 书中的逻辑处理部分使用的是这里的代码，不过做了修改。
效果展示
相关推荐
-
实现PHP搜索加分页
分页显示是浏览大量数据的一种方法.对于初学者来说常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解,力求让看完这篇文章的朋友在看完以后对于分页显示的原理和实现方法有所了解. 所有示例代码均使用php编写. 所谓分页显示,也就是将数据库中的结果集人为的分成一段一段的来显示. 请详细阅读以下代码,自己调试运行一次,最好把它修改一次,加上自己的功能. $wherelist=array(); $urlist=array(); if(!empty($_GET['title'])) { $w
-
jquery+json实现的搜索加分页效果
1.Web 里面有三个目录: 1.1 content.htm //这个文件直接运行就行 1.2 js //这里面有用到的几个js 文件,其中 以db 开头的就是数据源(就是json 串) 1.3 css //css 就不用说了 2. 直接运行 content.htm 就可以直接打开查看分页和搜索效果了 3. 原理很简单,只是用了javascript 的index 函数核心代码: 复制代码 代码如下: /* author: liulf function: var __db_cpcj=vCpcj;
-
BootStrap Table 分页后重新搜索问题的解决办法
前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").boot
-
使用Java的Lucene搜索工具对检索结果进行分组和分页
使用GroupingSearch对搜索结果进行分组 Package org.apache.lucene.search.grouping Description 这个模块可以对Lucene的搜索结果进行分组,指定的单值域被聚集到一起.比如,根据"author"域进行分组,"author"域值相同的的文档分成一个组. 进行分组的时候需要输入一些必要的信息: 1.groupField:根据这个域进行分组.比如,如果你使用"author"域进行分组,那么
-
ThinkPHP让分页保持搜索状态的方法
对很多使用ThinkPHP框架的人来说,使用自动自带的增删改查基类,在分页的时候要保持结果页面的搜索状态,但是使用thinkphp手册中的方案却无法奏效. ThinkPHP手册中的解决方法是: //分页跳转的时候保证查询条件 foreach($map as $key=>$val) { $Page->parameter .= "$key=".urlencode($val).&; } 直接粘贴过来不能用,经过调试会发现,当$map不是一个数组的时候,那么变量是拿不到想要
-
Ajax搜索结果页面下方的分页按钮的生成
时间紧木有做成JQ插件,通用性可能差一些但是基本功能是有的,比较适合初学者,望老鸟大虾表拍砖才好 哦少说了一句我用的是 JQueryUI里面的button感觉还不错 下图是第一页的样子 这是最后一页的样子 废话不说了上代码上面有参数说明看不懂的欢迎留言 复制代码 代码如下: //------------------------------------------------------ // pageingBtn() 分页按钮的显示方法 // pageIndex: 当前第几页 // maxPag
-
.net搜索查询并实现分页实例
前台: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="分页.aspx.cs" Inherits="分页练习.分页" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
-
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
本文实例讲述了Thinkphp实现搜索时首页分页和搜索页保持条件分页的方法.分享给大家供大家参考.具体实现方法如下: 在做搜索查询时突然发现在首页用的分页代码在搜索页使用时出现错误,首页分页代码(代码中标注start与end部分为分页代码) 复制代码 代码如下: public function index(){ $res=D('Info');// 实例化Data数据对象 /**********start************/ import('ORG.Util.Page');// 导入
-
ajax结合豆瓣搜索结果进行分页完整代码
使用豆瓣api,得到分页结果.相当于从后台数据库获得的结果一样.所不同的是,没法事先知道页数.虽然通过请求api可以获得总页数,但由于ajax是异步的,所以对于分页一开始就要给出总页数来说,这是没有意义的.我使用了一个固定总页数65(正是搜索javascript书籍返回的总页数).所以其他书籍是并不是65页,会出现多页或者少页的情况,这并不是bug. 特点 1,全程不需要接触后台,前端独立就可以(我找过好长时间都没找过完整的例子). 2,使用了bootstrap的pagination制作页码和p
-
springboot用thymeleaf模板的paginate分页完整代码
本文根据一个简单的user表为例,展示 springboot集成mybatis,再到前端分页完整代码(新手自学,不足之处欢迎纠正): 先看java部分 pom.xml 加入 <!--支持 Web 应用开发,包含 Tomcat 和 spring-mvc. --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web&l
-
JavaWeb中的简单分页完整代码(推荐)
这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action="pageServlet"> 用户名:<input type="text" name="username"><br> 密 码:<input type="text" name="passwo
-
vue实现前端分页完整代码
本文实例为大家分享了vue实现前端分页的具体代码,供大家参考,具体内容如下 首先,做出来的效果如图所示,具体的Ajax请求数据可以写在点击函数中 分页效果算是比较费脑子的,里面计算有些麻烦,本文上完整代码,一起学习进步 "上一页"写两个li元素,如果已经是第一页,那么就禁止鼠标点击,如果不是就curr减减,并且可以点击 同理"下一页"也一样 中间部分是通过indexs循环,indexs通过computed计算得出 <div class="page-b
-
用AJAX实现的无刷新的分页实现代码(asp.net)
之前,服务器返回的数据都是用xml的形式传给客户端的,但是xml传一个类的对象的数据会很长,流量大,所以现在都是改用json来传数据,复杂数据用json,简单数据用string.所有AJAX中的x已经失去了它原来的意义. 大家都知道JQuery,是一个Javascript的封装库,当然JQuery也实现了对AJAX的封装,这里将分页就是直接用JQuery框架来讲哈,比较简单. 首先讲一下原理:分页有两个要点:1.有多少页,2.每页有多少条记录.总页数和每页数据都是要从服务器端返回的.所以我们就先
-
CI框架（ajax分页，全选，反选，不选，批量删除）完整代码详解
CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而"优雅"的工具包,它可以为开发者们建立功能完善的 Web 应用程序.是比较主流的一个PHP框架. 下面给大家介绍CI框架(ajax分页,全选,反选,不选,批量删除)完整代码,具体代码如下所示: //ajax分页+搜索(视图层) function ajax_page(page){ var sou = $('#sou').val(); $.ajax({ type: "POST", dataTyp
-
jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）
select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自
-
Ajax实现搜索功能的分页
本文实例为大家分享了Ajax实现搜索功能的分页,供大家参考,具体内容如下 之前只实现了搜索功能,但是并不能分页2333,所以在上篇的基础上修改实现分页(首页,上一页,下一页,尾页,跳转页面),脑袋瓜不够用,要记下来记下来 html代码 <a class="btn-lit" type="submit" onclick="searchResult(on())"><span>搜索</span></a> /
-
asp+ajax仿google搜索提示效果代码
对于更完整的代码可以参考,这个是支持数据库的版本.经过我们编辑测试.Asp+Ajax仿google搜索提示效果 数据库版需要修改的地方有 复制代码 代码如下: javascript.js var url="ajax.asp"; //后台地址 var time_delayajax=300; //搜索延迟 var time_delayupdown=100; //方向键延迟 obj_div.style.top = (xtop + 20) + "px"; //20差不多是输
-
Laravel实现搜索的时候分页并携带参数
筛选分页每页的条数: <select class="form-control" id="perPage" name="perPage"> @foreach ( [10,20,30,50] as $e) <option value="{{$e}}" {{ $e==request('perPage') ? 'selected' : '' }} >{{$e}}</option> @endforea