как реализовать разбиение на страницы json файла

Question

таблица показывает данные из файла json, но все данные отображаются на одной странице, мне нужно реализовать разбиение на страницы для управления данными, чтобы отображать 10 строк на каждой странице.

$.ajax({
url:"https://jsonplaceholder.typicode.com/posts",
dataType: 'json',
success: function(data){
    console.log(data);
    var content = $('#body-content');
    $.each(data, function(i, item){
        var row = `
        <tr class="bg-light">
            <th scope="row">${item.userId}</th>
            <td>${item.id}</td>
            <td>605</td>
            <td>2/2/2020</td>
            <td>أحمد إبراهيم جلال</td>
            <td>
                <div class="lawyer__grade">
                    <i class="far fa-star lawyer__grade__empty"></i>
                    <i class="fas fa-star lawyer__grade__full"></i>
                    <i class="fas fa-star lawyer__grade__full"></i>
                    <i class="fas fa-star lawyer__grade__full"></i>
                    <i class="fas fa-star lawyer__grade__full"></i>     
                </div>
            </td>
        <td>150 ج</td>
    </tr>
        ` ;
        content.append(row);
    });
}

});

мой полный код указан на codepen

Answer 1

Вы можете сделать это динамически на сервере, создав несколько html файлов, каждый из которых представляет страницу, и каждый содержит 10 элементов ваших данных, или вы можете сделать некоторые трюки с JavaScript на стороне клиента, разделив ваш html в наборы каждого набора группируют 10 элементов ваших данных, и скрывают все наборы, кроме первого, и создают несколько кнопок для пользователя, чтобы имитировать разбиение на страницы, предыдущий и следующий, когда пользователь нажимает следующий, вам нужно скрыть все наборы и покажи второй, и построить вам логи c ...