ajax结合豆瓣搜索结果进行分页完整代码
程序员文章站
2022-11-22 20:06:06
使用豆瓣api,得到分页结果。相当于从后台数据库获得的结果一样。所不同的是,没法事先知道页数。虽然通过请求api可以获得总页数,但由于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 -->
参考
书中的逻辑处理部分使用的是这里的代码,不过做了修改。
效果展示