JavaScript Table Pagination Rendering JSON Data

Question

I'm fetching data in JSON format from a URL and rendering it to a table, but I need to show only 10 rows per page and I am not sure how to do it

Here is the code to render the data:

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

    });

You can [split the array in to chunks](https://stackoverflow.com/a/8495740/519413) and then traverse forwards/backwards through that as needed. Also note that githubusercontent isn't intended as a CDN, so I'd suggest using a local copy of that file. — Rory McCrossan, Nov 06 '19 at 10:19

Maxime Girou · Accepted Answer · 2019-11-06T13:53:24.227

Store you data in an array.

The fuunction displayMovie will take a page parameter (default 1) and display movies depends on wich page you want.

To know how many page there are, use Math.ceil. With this number you can append as many as "pagination button" you need.

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>

All good except when I click on "pagination button" I get an error "(index):1 Uncaught ReferenceError: displayMovies is not defined at HTMLButtonElement.onclick ((index):1)" — Kevin Zino, Nov 06 '19 at 13:11
There must be a typo in your code. As you can see the code i post works fine. Verify were your defined your `displayMovies`function. If the answer is good for you, please park it as answered — Maxime Girou, Nov 06 '19 at 13:20
Link to the code: https://jsfiddle.net/natefr0st/L5zujy6k/3/ I can't find the mistake : / — Kevin Zino, Nov 06 '19 at 14:00

JavaScript Table Pagination Rendering JSON Data

1 Answers1