使用Javascript限制分页

我有一个web应用程序，它使用OMDB API获取与用户搜索的电影标题匹配的所有相关结果。 例如，用户搜索“星球大战”时，API将返回483个结果，我设法对其进行分页，但它显示了1-48之间的所有页面，我试图弄清楚的是，我如何只能显示页面[1,2,3,4,5,6,7…49（结束页面）]，然后将分页更改为[2,3,4,5,6,7,8…49]，依此类推。 下面是它的代码：

搜寻

函数callOMDB（x）{
var poster=document.getElementById（“信息”）；
var page=document.getElementById（“分页”）；
var搜索=x；
var searchLink=https://www.omdbapi.com/?i=tt3896198&apikey=123456&s='+encodeURI（x）；
$.getJSON（searchLink）.then（函数（响应）{
poster.innerHTML=''；
page.innerHTML=''；
变量长度=response.Search.length；
对于（变量i=0；i标题：“+Title+”
”；
}
var pageNo=response.totalResults/10；
var i=0；
对于（i=1；i{
获取数据（标题输入值）；
});
//活动代表团
$（'body'）。在（'click'，'page link'，函数（e）{
e、 预防默认值（）；
getData（titleInput.value，this.id）；
});
函数getData（关键字，页=1）{
$.getJSON（`${searchLink}&page=${page}&s=${keyword}`）。然后（函数（响应）{
posterContainer.innerHTML=''；
pageContainer.innerHTML=''；
变量长度=response.Search.length；
对于（变量i=0；i标题：“+Title+”
”；
}
var pageNo=response.totalResults/10；
var i=0；
对于（i=1；i`；
}
});
}
}); 

HTML

搜寻

提供我的有效API密钥，我正在尝试demo@AhmedKesha56fbcd03I试图提供帮助，但我无法确定您是否需要分页显示或查询方面的帮助。。。无论哪种方式，我都建议为查询添加

page

参数，不要一次收到所有结果。

 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>`;
                    }
                });
            }
        }); 

<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>