我如何从NYT api获取文章以在没有php的情况下每页显示10条

Question

这是我的剧本。我正在使用pagination.js CDN。我不确定应该将分页功能作为编码的新功能放置在哪里，我试图将article设置为数组。大多数代码都可以使用，但是它将所有结果显示在一页上。我想把它分成几页。我的问题似乎是在将我的数据（文章）加载到分页中。当我运行代码时，它说需要数据源。

$(document).ready(function(){
    //set the event listener
    $('.submit').click( function(e){
        //grab the search entry and store in a variable
        let searchArea = $('#search').val()

        let startDate = $('#start-date').val();
        let endDate = $('#end-date').val();
        let regex = new RegExp(searchArea, 'i');
        let pageNumber = 0;
        let nav = document.querySelector('nav');
        let displayNav = false;
        let section = document.querySelector('section')
        let print = '<div class = "myarticles" id = "myarticles"';
        let articles = [];
        let article;
 //I have used getJson instead of ajax because it's shorter.
        $.getJSON('https://api.nytimes.com/svc/topstories/v2/science.json?q=new+york+times&page=2&sort=oldest&api-key=Your key',function(data){
           $.each(data.results, function(key, value){
               function displayResults(){

                if(value.title.search(regex) !=-1){
                    while(section.firstChild){
                        section.removeChild(section.firstChild);
                    }
//filter the articles by date.
                for(let j= startDate; j<=endDate; j++){
                    articles.push(value);
                }

                if(articles.length===0){
                    let para = document.createElement('p');
                    para.textContent=('no articles found');
                    $('#section').appendChild(para);
                }else{

                    for(let i=0; i<articles.length; i++){
                        let article =document.createElement('article');
                        let heading = document.createElement('h2');
                        let link = document.createElement('a');
                        let img = document.createElement('img');
                        let para1 = document.createElement('p');
                        let para2 = document.createElement('p');
                        let clearfix = document.createElement('div');
                        let current = articles[i];

                        link.href = current.url;
                        link.textContent =current.title;
                        para1.textContent = current.abstract;
                        img.src =current.multimedia;

                        article.appendChild(heading);
                        heading.appendChild(link);
                        article.appendChild(para1);


                        $('#section').append(article);
                     }

                     $(function(article){
                       let pageParts = $('.paginate');
                       let numPages = pageParts.length;
                       let perPage =10;
                       pageParts.slice(perPage).hide;
                       $('#page-nav').pagination({
                         dataSource: article,
                         items:numPages,
                         itemsOnPage: 10,
                         cssStyle:'ligth-theme',

                         onPageClick: function(pageNum){
                          let start = perPage*(pageNum - 1);
                          let end = start + perPage;
                          pageParts.hide().slice(start,end).show();
                         }
                       })
                     })

                    }

                 }
                  }

                  displayResults();
              });
        })

    }); 
});