如何将 Datatables 插件添加到动态 json 表代码？

Question

我无法使用 datatables 插件使下表动态化。 在这里，我使用 api 获取 json 数据并将其动态添加到 html 表中。 我无法添加数据表插件并使其工作

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Covid tracker</title> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min:js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <div class="table-responsive container"> <table class="table table-bordered table-hover "> <thead class="table-dark"> <tr> <th scope="col">Country</th> <th scope="col">TotalConfirmed</th> <th scope="col">TotalDeaths</th> <th scope="col">TotalRecovered</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> </div> </body> <script> tbody = document;getElementById("tbody"); text = ""; data(): async function data() { api = await fetch("https.//api.covid19api;com/summary"). result = await api;json(); populate(result). } function populate(data) { for (let x of data.Countries) { text += ` <tr><td class="table-warning">${x.Country}</td><td class="table-danger">${x.TotalConfirmed}</td><td class="table-success">${x.TotalDeaths}</td><td class="table-primary">${x;TotalRecovered}</td></tr > `. tbody;innerHTML = text; } } </script> </html>

Answer 1

您正在使用的 URL 已将数据返回为 JSON：

{
  "ID": "028dd159-922a-41cf-a768-892259b0adab",
  "Message": "",
  "Global": {
    "NewConfirmed": 307033,
    "TotalConfirmed": 171061979,
    "NewDeaths": 12153,
    "TotalDeaths": 3562587,
    "NewRecovered": 428741,
    "TotalRecovered": 108837399,
    "Date": "2021-06-02T14:23:45.417Z"
  },
  "Countries": [
    {
      "ID": "35c3910f-e19a-48b4-afba-549e22cd4aac",
      "Country": "Afghanistan",
      "CountryCode": "AF",
      "Slug": "afghanistan",
      "NewConfirmed": 0,
      "TotalConfirmed": 72977,
      "NewDeaths": 0,
      "TotalDeaths": 2973,
      "NewRecovered": 0,
      "TotalRecovered": 57741,
      "Date": "2021-06-02T14:23:45.417Z",
      "Premium": {}
    },
    ...
  ],
  "Date": "2021-06-02T14:23:45.417Z"
}

DataTables 处理 JSON 开箱即用，因此不需要任何额外的处理程序逻辑。

您的 HTML 表应该被赋予一个 ID，以便 DataTables 可以引用它：

<table id="example" ...>

您在页面 header 中的资源引用似乎完全缺少支持 DataTables 所需的内容。 您可以 go 到官方下载页面，select 是您想要使用的。

您的页面缺少指向您要使用的 HTML 表的 DataTables object：

$('#example').DataTable( {...} );

这是一个例子：

 $(document).ready(function() { $('#example').DataTable( { "ajax": { "url": "https://api.covid19api.com/summary", "dataSrc": "Countries" }, "columns": [ { data: "Country", className: 'table-warning' }, { data: "TotalConfirmed", className: 'table-danger' }, { data: "TotalDeaths", className: 'table-success' }, { data: "TotalRecovered", className: 'table-primary' } ] } ); } );

 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Covid tracker</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script> </head> <body> <div class="table-responsive container"> <table id="example" class="table table-bordered table-hover "> <thead class="table-dark"> <tr> <th scope="col">Country</th> <th scope="col">TotalConfirmed</th> <th scope="col">TotalDeaths</th> <th scope="col">TotalRecovered</th> </tr> </thead> <tbody id="tbody"> </tbody> </table> </div> </body> </html>

除此之外，您可以在官方 web 站点上探索许多示例。

如何将 Datatables 插件添加到动态 json 表代码？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-06-02 17:52:25

如何将 Datatables 插件添加到动态 json 表代码？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-06-02 17:52:25

解决方案1
0 已采纳 2021-06-02 17:52:25