Shulou(Shulou.com)06/03 Report--

This article is about how to use ajax combined with Douban search results for paging. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use Douban api to get the paging results. It is equivalent to the result obtained from the background database. The difference is that it is impossible to know the number of pages in advance. Although you can get the total number of pages by requesting api, because ajax is asynchronous, it doesn't make sense to give the total number of pages at the beginning of paging. I used a fixed total of 65 pages (which is the total number of pages returned by searching for javascript books). So other books are not 65 pages, there will be more or less pages, this is not bug.

Characteristics

1. There is no need to contact the backend during the whole process, and the front end is independent (I haven't found a complete example for a long time).

2. Use the pagination of bootstrap to make the page number and panel to make the panel to place the results.

The code is as follows

.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 } search title, author, publication date average price GO var partPageModule = (function ($) {var initPager = null,// initial paging function setPagerHTML = null,// generated page HTML code pageClick = null,// click event ajax = null for each page button / / ajax requests background data renderButton = null, $content = $('') / / dynamically generated page number / * function: complete initialization of the total number of pages of * @ totalPages, and obtain the current number of pages of * @ currentPage from the backend * / initPager = function (totalPages, currentPage) {$content = setPagerHTML ({currentPage: currentPage, totalPages: totalPages, pageClick: PageClick}) $('# test'). Empty () .append ($content) / / add to # test $('# jumpToPage'). Click (function (e) {/ / bind the click event e.preventDefault () of the GO button after getting the paging; PageClick (totalPages, $('# page'). Val () * 1) }) $('# page'). Keyup (function (e) {/ / Enter key binding search event if (e.keyCode = 13) {$('# jumpToPage'). Trigger ('click');}) $(' # result'). Html ('you clicked on page' + currentPage + 'page')}; / * function: page number click event. Regenerate all page numbers and use ajax to get data * / PageClick = function (totalPages, currentPage) {initPager (totalPages, currentPage); ajax (currentPage); / / request Douban using jsonp} ajax = function (currentPage) {var $input = $('# bookName'), bookName ='', $tbody = $('# tbody') / / totalPages; bookName = $input.val () If (! bookName) {/ / if no input, do not send a request for $input.focus (); return } else {$.ajax ({type: 'get', url:' https://api.douban.com/v2/book/search',// Douban Book 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 no need to consider beyond the problem, followed by a conditional prevPage = currentPage-1 / * logical processing to generate different ul * / if (currentPage = = startPage) {/ / the current page is the starting page $content.append ('home page'); / / the home page is not available $content.append ('previous page'); / / the previous page is not available} else {/ / is not the starting page $content.append (totalPages, 1, pageClick, 'home page') / / generate the home page and bind the event $content.append (renderButton (totalPages, prevPage, pageClick, 'previous page'); / / generate the previous page and bind the event} if (totalPages 5 & & totalPages-currentPage 5 & & currentPage > 3) {/ / the total number of pages is greater than 5, and the current page is in the middle. Generate the middle page number $content.append ('...'); for (var I = currentPage-2; I)

5 & & currentPage

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.