时间戳

首页 > 解决方案 > 如何在json文件上实现分页

javascript - 如何在json文件上实现分页

问题描述

该表显示来自 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上有我的完整代码

标签： javascriptjsonajax

解决方案

您可以在服务器上动态地做到这一点，通过创建一些 html 文件，每个文件代表一个页面，每个包含 10 项数据，或者您可以在客户端使用 JavaScript 做一些技巧，将您的 html 划分为每组 10 项您的数据，并隐藏除第一个之外的所有集合，并为用户创建一些按钮来模拟分页，上一个和下一个，当用户单击下一步时，您需要隐藏所有集合并显示第二个，并且建立你的逻辑......

推荐阅读