时间戳

首页 > 解决方案 > 使用 Javascript 限制分页

javascript - 使用 Javascript 限制分页

问题描述

我有一个使用 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>';
        }
    });
}

标签： javascript

解决方案

您可以使用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)

推荐阅读