真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

如何使用ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁

這篇文章給大家分享的是有關(guān)如何使用ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們在業(yè)內(nèi)良好的客戶口碑。成都創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運(yùn)營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價值。

使用豆瓣api，得到分頁結(jié)果。相當(dāng)于從后臺數(shù)據(jù)庫獲得的結(jié)果一樣。所不同的是，沒法事先知道頁數(shù)。雖然通過請求api可以獲得總頁數(shù)，但由于ajax是異步的，所以對于分頁一開始就要給出總頁數(shù)來說，這是沒有意義的。我使用了一個固定總頁數(shù)65（正是搜索javascript書籍返回的總頁數(shù)）。所以其他書籍是并不是65頁，會出現(xiàn)多頁或者少頁的情況，這并不是bug。

特點(diǎn)

1、全程不需要接觸后臺，前端獨(dú)立就可以（我找過好長時間都沒找過完整的例子）。
2、使用了bootstrap的pagination制作頁碼和panel制作放置結(jié)果的面板。

代碼如下

書名作者出版日期平均分價格

GO var partPageModule = ( function ( $ ) { var initPager = null,// 初始換分頁函數(shù) setPagerHTML = null,// 生成分的頁HTML代碼 pageClick = null,//　每一頁按鈕的點(diǎn)擊事件 ajax = null, // ajax請求后臺數(shù)據(jù) renderButton = null, $content = $( '' ) // 動態(tài)生成的頁碼 ; /* 功能：完成初始化 * @totalPages 總頁數(shù)，從后端獲取 * @currentPage 當(dāng)前所在的頁數(shù) */ initPager = function ( totalPages, currentPage ) { $content = setPagerHTML({ currentPage: currentPage, totalPages: totalPages, pageClick: PageClick }) $( '#test' ).empty().append( $content );// 得到分頁后添加到#test $( '#jumpToPage' ).click( function ( e ) {// 綁定GO按鈕的點(diǎn)擊事件 e.preventDefault(); PageClick( totalPages, $('#page').val() * 1); }) $( '#page' ).keyup( function ( e ) {// Enter鍵綁定搜索事件 if ( e.keyCode === 13 ) { $( '#jumpToPage').trigger( 'click' ); } }) $( '#result' ).html( '你點(diǎn)擊的是第' + currentPage + '頁') }; /* 功能：頁碼點(diǎn)擊事件。重新生成所有頁碼，并且使用ajax獲取數(shù)據(jù) */ 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 ) { // 如果沒有輸入，就不要發(fā)送請求了 $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 ; /* 邏輯處理，根據(jù)點(diǎn)擊的不同的頁生成不同的ul */ if ( currentPage == startPage ) {//當(dāng)前頁是起始頁 $content.append( '

首頁

' ); // 首頁不可用 $content.append( '

' ); // 上一頁不可用 } else { // 不是起始頁 $content.append( renderButton( totalPages, 1, pageClick, '首頁') ); // 生成首頁并綁定事件 $content.append( renderButton( totalPages, prevPage, pageClick, '上一頁') ); // 生成上一頁并綁定事件 } if ( totalPages <=5 && currentPage <= 5 ) {// 總頁數(shù)小于5，當(dāng)前頁小于5，全部生成頁碼 for ( var i = 1; i <= totalPages; i++ ) { if( i === currentPage ) { $content.append( '' + i + '' );// 當(dāng)前頁不可點(diǎn)擊 } else { $content.append( renderButton( totalPages, i, pageClick, i) );// 其他頁可以點(diǎn)擊 } } } else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 總頁數(shù)大于5，當(dāng)前頁接近總頁數(shù)，前面顯示...,后面顯示到結(jié)尾的頁碼 $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) {// 總頁數(shù)大于5，當(dāng)前頁在中間，前后生成...，生成中間頁碼 $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 ) {// 總頁數(shù)大于5，當(dāng)前頁接近第一頁，顯示前面頁碼，后面顯示... 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 ) {//當(dāng)前頁是末頁 $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;// 所以這個總頁數(shù)是不準(zhǔn)確的。一般這個數(shù)據(jù)是后端返回的。這里的65是javascript搜索的頁數(shù)，不同的書籍搜索結(jié)果不一樣，由于ajax異步執(zhí)行，所以這里會默認(rèn)為65。這里不是bug。 partPageModule.init( totalPage, 1 ); }) $( '#bookName' ).keyup( function ( e ) { if ( e.keyCode === 13 ) { $( '#search' ).trigger( 'click' ); } }) $( '#search' ).trigger( 'click' ); })

感謝各位的閱讀！關(guān)于“如何使用ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當(dāng)前名稱：如何使用ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁
轉(zhuǎn)載注明：http://weahome.cn/article/gehicp.html