如何将分页添加到 JSON 数据到 HTML 页面答案

【问题标题】：how to add pagination to JSON data to HTML page如何将分页添加到 JSON 数据到 HTML 页面
【发布时间】：2021-04-29 12:23:53
【问题描述】：

HTML：

我使用外部 JSON 数据创建了一个 HTML 表，该表包含从外部源获取的 50 行数据，并将其显示在 HTML 表中，并在警报/对话中显示数据。

<html lang="en">

<head>
  <title>home page </title>
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
  </script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="script.js"></script>    
    </head>

<body>
  <div class="container">
    <table class="table table-hover" id="table" style="width:100%"> 
    <tbody>
        <tr>
          <th>ID</th>
          <th>FirstName</th>
          <th>LastName</th>
          <th>Username</th>
          <th>Avatar</th>
          <th>E-mail</th>    
          <th>Age</th>
          <th>gender</th>
          <th>maritial status</th>
          <th>address</th>
          <th>Phone</th>
          <th>Website</th>
        </tr>
      </tbody>
    </table>
  </div>
 
 </body>
</html>

JQuery:

这里 jquery 从源中获取数据并将其显示在表格中，当点击表格的相应行时提醒数据，现在我需要添加分页和下拉菜单，其中偶像页面应该显示 1 -10 行，其余数据必须隐藏，并根据分页/下拉值显示数据。即：page1：1-10，page2：11-20，... page5：41-50。

$(document).ready(function () {
        
        fetch('http://fakeapi.jsonparseronline.com/users')
    .then(res => res.json())
    .then((out) => {
        console.log('Output: ', out);
    }).catch(err => console.error(err));

                    
                    $.getJSON('http://fakeapi.jsonparseronline.com/users',
                            function (data) {
                        var udata = '';

                        
                        $.each(data, function (key, value) {

                            
                            udata += '<tr>';
                            udata += '<td>' +value.id + '</td>';
                            udata += '<td>' +' '+value.firstName + '</td>';
                            udata += '<td>' +' '+value.lastName + '</td>';
                            udata += '<td>' +' '+ value.username + '</td>';
                            udata += '<td>' +' '+value.email + '</td>';
                            udata += '<td>' +' '+value.age + '</td>';
                            udata += '<td>' +' '+value.gender + '</td>';
                            udata += '<td>' +' '+value.maritalStatus + '</td>';
                            udata += '</tr>';
                            
                            }); 
                        $('#table').append(udata);
                    
                        $("#table tbody tr").click(function()
                                                {  
                           var $row=$(this).closest("tr");
                           var $text=$row.find("td").text(); 
                           alert($text);
                                                });
                        
                    });
                });```

Note: Script/Table-data doesn't work in brackets/vs live preview, please open directly on browser.

【问题讨论】：

标签： html jquery json

【解决方案1】：

你当然可以用 Javascript 来做，但是要处理的东西很多。

我会使用datatables。它甚至会负责将您的 JSON 转换为表格、排序和过滤。它非常好用且易于使用。

由于跨域请求，以下 sn-p 无法实时运行。它可以从浏览器中打开的本地文件中工作

$(_e => {
  $('#table').DataTable( {
    ajax: {
      url: 'http://fakeapi.jsonparseronline.com/users',
      dataSrc: ''
    },
    columns: [
      { data: 'id' },
      { data: 'firstName' },
      { data: 'lastName' },
      { data: 'username' },
      { data: user => `<img src="${user.avatar}" />` },
      { data: 'email' },
      { data: 'age' },
      { data: 'gender' },
      { data: 'maritalStatus' },
      { data: user => 
        `${user.address.street}<br />${user.address.zipcode} ${user.address.city}`
      },
      { data: 'phone' },
      { data: 'website' }
    ]
  } );
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />

<div class="container">
  <table class="table table-hover" id="table" style="width:100%"> 
    <thead>
      <tr>
        <th>ID</th>
        <th>FirstName</th>
        <th>LastName</th>
        <th>Username</th>
        <th>Avatar</th>
        <th>E-mail</th>    
        <th>Age</th>
        <th>Gender</th>
        <th>Maritial status</th>
        <th>address</th>
        <th>Phone</th>
        <th>Website</th>
      </tr>
    </thead>
  </table>
</div>

注意 您的列标题必须在<thead>

中定义

【讨论】：