JavaScript 表格分页渲染 JSON 数据

Question

我正在从 URL 获取 JSON 格式的数据并将其呈现到表格中，但我只需要每页显示 10 行，我不知道该怎么做

这是渲染数据的代码：

const url = "https://gist.githubusercontent.com/bstech-ux/e717b74dbd7cc95a8429eadc83a5c882/raw/ca85214d461ef93c316a47a6770c4b9ba678a6b3/movies.json";
    // Get JSON Data and Loop Through Each Object in the Array
    $.getJSON(url, (data) => {
        // parsePaginationData(data);
        let movie_data = "";
        // Append Data to movie_data Variable
        $.each(data, (key, value) => {
            movie_data += 
            `<tr>
                <td scope="row">${value.id}</td>
                <td>${value.title}</td>
                <td>${value.director}</td>
                <td>${value.distributor}</td>
                <td class="rating">${value.imdb_rating}</td>
                <td class="votes">${value.imdb_votes}</td>
                <td><button type="button" class="btn btn-danger">Delete</button></td>
            </tr>`;
        });

        $('#movies').append(movie_data);

    });

Answer 1

将数据存储在数组中。

函数displayMovie 将接受一个页面参数（默认为1）并显示电影取决于您想要的页面。

要知道有多少页，请使用Math.ceil。使用这个数字，您可以添加任意数量的“分页按钮”。

let movies = [];
const url = "https://gist.githubusercontent.com/bstech-ux/e717b74dbd7cc95a8429eadc83a5c882/raw/ca85214d461ef93c316a47a6770c4b9ba678a6b3/movies.json";
    // Get JSON Data and Loop Through Each Object in the Array
    $.getJSON(url, (data) => {
        movies = data;
        displayMovies();
        setPages();
    });
    
    function displayMovies(page = 1){
       let movie_data = "";
       let max = page*10;
       let min = max-10;
        // Append Data to movie_data Variable
        for(let i = min; i < max; i++){
          let movie = movies[i];
           if(movie){
            movie_data += 
            `<tr>
                <td scope="row">${movie.id}</td>
                <td>${movie.title}</td>
                <td>${movie.director}</td>
                <td>${movie.distributor}</td>
                <td class="rating">${movie.imdb_rating}</td>
                <td class="votes">${movie.imdb_votes}</td>
                <td><button type="button" class="btn btn-danger">Delete</button></td>
            </tr>`;
           }else{
            break;
           }
        }
       

        $('#movies').html(movie_data);
    }
    
    
    function setPages(){
      let nbPages = Math.ceil(movies.length/10);
      let pages = "";
      for(let i = 1; i <= nbPages; i++){
       pages+='<button type="button" onClick="displayMovies('+i+')">Page '+i+'</button>'
      }
       $('#pages').append(pages);
     
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="movies"></div>
<div id="pages"></div>