Question

请帮助，如何将jquery分页添加到以下html代码中，我希望每页能够列出10条结果，我的代码的重点是搜索一本书，该书的最高搜索结果为50 ，但将包括5个页面，每个页面有10个结果。目前，我可以使用html代码搜索结果。

<!DOCTYPE html>
<html>
<head>
    <title>Google Books Search</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js">
    </script>
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
    </script>

    <script>

    function B_Search() {

    var search = document.getElementById('search').value;

    var result = document.getElementById('results');

    var resultString = "";

    console.log(search);

    $.ajax({

    url: "https://www.googleapis.com/books/v1/volumes?q=id:"+ search,

    dataType: "json",

    success: function(data) { console.log(data);

    for (i = 0; i < data.items.length; i++) {

    resultString += "<h2>" + data.items[i].volumeInfo.title + "<\/h2>";

    resultString += "<h2>" + data.items[i].volumeInfo.authors + "<\/h2>";

    resultString += "<div><b>Publisher:<\/b> " + 
    data.items[i].volumeInfo.publisher + "<\/div>";

    resultString += "<div><b>publishedDate: <\/b>" + 
    data.items[i].volumeInfo.publishedDate + "<\/div>";

    resultString += "<div><b>Description: <\/b>" + 
    data.items[i].volumeInfo.description + "<\/div>";

    resultString += '<div><img src="' + 
    data.items[i].volumeInfo.imageLinks.thumbnail + '"/><\/div>';

    if (data.items[i].saleInfo.saleability == "FOR SALE") {

    resultString += "<div><b>Price: <\/b>" + 
    data.items[i].saleInfo.retailPrice.amount +
    data.items[i].saleInfo.retailPrice.currencyCode + "<\/div>";

    }

    else {

    resultString += "<div>Not for Sale<\/div>"

    } } result.innerHTML = resultString; },

    type: 'GET'

    });

    }

    </script>
</head>
<body>
    <h1><u>Book Search</u></h1>
    <form>
        <input id="search" placeholder="type in here"> <button 
id="buttons" onclick="B_Search()" type="button">click here</button>
    </form>
    <div id="results"></div>

</body>
</html>

HTML JQuery搜索结果分页

0 个答案: