0

我有一个使用 OMDB API 的网络应用程序，它获取与用户搜索的电影标题匹配的所有相关结果。因此，例如，用户搜索“星球大战”，API 将返回483 个结果，我设法为它进行了分页，但它显示了 1-48 的所有页面，我想弄清楚的是我该怎么做仅显示页面 [1,2,3,4,5,6,7...49（结束页面）]，然后将该分页更改为 [2,3,4,5,6,7,8...49 ] 等等。这是它的代码：

<input type="text" class="form-control" id="title" name="title" placeholder="Movie Title...">
<button onclick="callOMDB(document.getElementById('title').value)" class="btn btn-primary">Search</button>
<div id="page" class="page">
   <nav aria-label="Page navigation example">
        <ul class="pagination" id="pagination">
        </ul>
   </nav>
</div>
<div id="info">
</div>

function callOMDB(x){
    var poster = document.getElementById("info");
    var page = document.getElementById("pagination");
    var search = x;
    var searchLink = 'https://www.omdbapi.com/?i=tt3896198&apikey=123456&s='+encodeURI(x);
    $.getJSON(searchLink).then(function(response){
    poster.innerHTML = '';
    page.innerHTML = '';
        var length = response.Search.length;
        for(var i = 0; i < length; i++){
            var yr = response.Search[i].Year;
            var title = response.Search[i].Title;
            poster.innerHTML += "<p>Year: "+yr+"</p><p>Title: "+title+"</p>";
        }
        var pageNo = response.totalResults/10;
        var i = 0;
        for(i = 1; i < pageNo; i++){
            page.innerHTML += '<li class="page-item"><a onclick="nextPage('+i+',\''+search+'\')" class="page-link" href="#">'+i+'</a></li>';
        }
    });
}
4

2 回答 2

0

您可以使用slice获取整个结果的切片并显示它。出于演示的目的，我只是向您展示了。结果只是数字。数组可以是任何东西。重要的是slice获得您想要的部分结果并显示它们。

单击后，移动开始和结束位置

const resultsList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // This could be results / or page numbers
const maxResults = 9;
let upperPageIndex = maxResults;
let currentPageIndex = 0;

let resultsToDisplay = resultsList.slice(currentPageIndex , upperPageIndex); // slice(startIndex, endIndex);

console.log(resultsToDisplay)


// if currentPageIndex = 2 then show 2 more as you go through
upperPageIndex += 1; // You can make 2 a constant if needed
currentPageIndex += 1;

resultsToDisplay = resultsList.slice(currentPageIndex , upperPageIndex);

console.log(resultsToDisplay)

于 2020-03-12T14:08:21.593 回答
0

我在中使用了参数page，omdbapi这就是我的代码

JS

 window.addEventListener('DOMContentLoaded', function () {
            const posterContainer = document.getElementById("info");
            const pageContainer = document.getElementById("pagination");
            const titleInput = document.getElementById('title');
            const searchBtn = document.getElementById('searchBtn');
            const searchLink = 'https://www.omdbapi.com/?i=tt3896198&apikey=56fbcd03';

            searchBtn.addEventListener('click', () => {
                getData(titleInput.value);
            });

            // event delegation
            $('body').on('click', '.page-link', function (e) {
                e.preventDefault();
                getData(titleInput.value, this.id);
            });
            function getData(keyword, page = 1) {
                $.getJSON(`${searchLink}&page=${page}&s=${keyword}`).then(function (response) {
                    posterContainer.innerHTML = '';
                    pageContainer.innerHTML = '';
                    var length = response.Search.length;
                    for (var i = 0; i < length; i++) {
                        var yr = response.Search[i].Year;
                        var title = response.Search[i].Title;
                        posterContainer.innerHTML += "<p>Year: " + yr + "</p><p>Title: " + title + "</p>";
                    }
                    var pageNo = response.totalResults / 10;
                    var i = 0;
                    for (i = 1; i < pageNo; i++) {
                        pageContainer.innerHTML += `<li class="page-item" ><a class="page-link" id="${i}" href="#">${i}</a></li>`;
                    }
                });
            }
        });

HTML

<input type="text" class="form-control" id="title" name="title" placeholder="Movie Title...">
<button id="searchBtn" class="btn btn-primary">Search</button>
<div id="page" class="page">
    <nav aria-label="Page navigation example">
        <ul class="pagination" id="pagination">
        </ul>
    </nav>
</div>
<div id="info">
</div>
于 2020-03-12T14:16:27.290 回答