javascript - 使用 fetch api 创建 DataTable

Question

我正在尝试创建一个 Datatables使用获取 API。

所以我正在使用以下API

我基本上是想获取美国的所有统计数据，所以我做了以下操作。

const getNewCases = async () => {
  const response = await fetch('https://cors-anywhere.herokuapp.com/https://covid19.mathdro.id/api/daily/3-18-2020');
  const data = await response.json();
  let usa = data.filter(val => {
  return val.countryRegion === 'US';
});
  console.log(usa)
};

所以此时我想知道是否可以使用这个结果创建一个数据表。我在 Datatables 上看到的所有示例都使用 JQuery 并进行一些 ajax 调用。我希望获得一些关于如何在没有 JQuery 的情况下制作数据表的指导。

我对 JS 很陌生，所以如果这是一个不好的问题，请原谅。我只是想学习这个。

Answer 1

您可以按如下方式使用 DataTable 来获取来自 API 的数据:

您可以使用以下选项禁用显示条目下拉列表:

bLengthChange: false

const getNewCases = async() => {
  const response = await fetch('https://covid19.mathdro.id/api/daily/3-18-2020');
  const data = await response.json();
  let usa = data.filter(val => {
    return val.countryRegion === 'US';
  });
  $('#loadingLabel').hide();
  $('#myTable').DataTable({
    data: usa,
    bLengthChange: false,
    columns: [
      { data: 'provinceState', title: 'State' },
      { data: 'countryRegion', title: 'Country' },
      { data: 'lastUpdate', title: 'Last Update' },
      { data: 'confirmed', title: 'Confirmed' },
      { data: 'deaths', title: 'Deaths' },
      { data: 'recovered', title: 'Recovered' }
    ]
  });
};

scrollToPager = () => {
  var y = $(window).scrollTop();
  $('html, body').animate({
    scrollTop: y + $('#myTable').height()
  })
}

getNewCases();

* {
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
  font-size: 13px;
}

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

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
<button onclick="scrollToPager()">Scroll Down</button>
<table id="myTable"></table>
<div id="loadingLabel">Loading...</div>

加载所有行:

bPaginate: false

const getNewCases = async() => {
  const response = await fetch('https://covid19.mathdro.id/api/daily/3-18-2020');
  const data = await response.json();
  let usa = data.filter(val => {
    return val.countryRegion === 'US';
  });
  $('#loadingLabel').hide();
  $('#myTable').DataTable({
    data: usa,
    bPaginate: false,
    columns: [
      { data: 'provinceState', title: 'State' },
      { data: 'countryRegion', title: 'Country' },
      { data: 'lastUpdate', title: 'Last Update' },
      { data: 'confirmed', title: 'Confirmed' },
      { data: 'deaths', title: 'Deaths' },
      { data: 'recovered', title: 'Recovered' }
    ]
  });
};

scrollToPager = () => {
  var y = $(window).scrollTop();
  $('html, body').animate({
    scrollTop: y + $('#myTable').height()
  })
}

getNewCases();

* {
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
  font-size: 13px;
}

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

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>
<button onclick="scrollToPager()">Scroll Down</button>
<table id="myTable"></table>
<div id="loadingLabel">Loading...</div>