JavaScript Таблицы страниц рендеринга данных JSON - PullRequest
Новая
       10

JavaScript Таблицы страниц рендеринга данных JSON

0 голосов
/ 06 ноября 2019

Я получаю данные в формате JSON с URL-адреса и отображаю их в таблице, но мне нужно показать только 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);

    });

1 Ответ

1 голос
/ 06 ноября 2019

Сохранение ваших данных в массиве.

Функция 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>
...