JavaScript表分页呈现JSON数据

2024-05-20 • 问答

我正在从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);

    });

将数据存储在数组中。

功能displayMovie将带有page参数（默认为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>

JavaScript表分页呈现JSON数据

fishingboy123 回答：JavaScript表分页呈现JSON数据

大家都在问