在包含来自 JSON 的动态条目的表中进行分页


Pagination in a table with dynamic entries from JSON

我正在创建一个页面,该页面从JSON文件中动态获取条目并以表格的形式显示 我已经编写了代码以Java脚本创建表格,但它一次获取所有条目。我正在尝试创建一个每页只有 10 个条目的分页并尝试创建排序。下面是用于创建表的函数。

  function myFunction32() 
    {
       var table = document.getElementById("contentTable");
       table.innerHTML = "";
       var row = table.insertRow(0);
       var cell1 = row.insertCell(0);
       var cell2 = row.insertCell(1);
       var cell3 = row.insertCell(2);
       var cell4 = row.insertCell(3);
       var cell5 = row.insertCell(4);
      
       cell1.innerHTML = "Disk ID";
       cell2.innerHTML = "Serial Number";
       cell3.innerHTML = "Hypervisor IP";
       cell4.innerHTML = "TIER";
       cell5.innerHTML = "Total Capacity";
  
   for(var i=0; disk.length;i++)
   {
   var row = table.insertRow(i+1);
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   var cell4 = row.insertCell(3);
   var cell5 = row.insertCell(4);
   
   cell1.innerHTML = disk[i].disk_id;
   cell2.innerHTML = disk[i].disk_serial_id;
   cell3.innerHTML = disk[i].hypervisor_ip;
   cell4.innerHTML = disk[i].storage_tier;
   cell5.innerHTML = disk[i].disk_size +" GiB";
   
   } 

我已经更新了代码,每页包含 10 个条目,但我无法为下一页创建一个新按钮以及排序。

我在 HTML 中调用我的表

如下

<div id="fatal" style="margin-left:20px;margin-right:10px;">
      <table id = "contentTable" class="table table-bordered"></table>
</div>

感谢您的任何帮助。

我遇到了同样的问题,我用jQuery数据表解决了这个问题,看看我的要点 https://gist.github.com/dptole/08f090b3cbe00e8ba937。您必须编辑并应用于您的方案。

从第 65 行到 67 行,我有一个包装器来返回 API 端点字符串,而无需实际请求它。