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

Question

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

<!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

您正在使用 returns 数据作为 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 table 应该被赋予一个 ID，以便 DataTables 可以引用它：

<table id="example" ...>

页眉中的资源引用似乎完全缺少支持数据表所需的内容。您可以转到 official download page，然后 select 您要使用的那些。

您的页面缺少指向您要使用的 HTML table 的 DataTables 对象：

$('#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>

除此之外，您还可以在官方网站上探索许多 examples。

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

How to add Datatables plugin to dynamic json table code?

javascript

datatables

fetch-api