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 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
– Rory McCrossan, Commented Nov 6, 2019 at 10:19

Maxime Girou · Accepted Answer · 2019-11-06 13:53:24Z

2

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>

edited Nov 6, 2019 at 13:53

answered Nov 6, 2019 at 10:59

Maxime Girou

1,5703 gold badges18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kevin Zino Over a year ago

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

Maxime Girou Over a year ago

There must be a typo in your code. As you can see the code i post works fine. Verify were your defined your displayMoviesfunction. If the answer is good for you, please park it as answered

Kevin Zino Over a year ago

Link to the code: jsfiddle.net/natefr0st/L5zujy6k/3 I can't find the mistake : /

Kevin Zino Over a year ago

Thanks a lot! You are a savior !

Collectives™ on Stack Overflow

JavaScript Table Pagination Rendering JSON Data

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related