Создайте DataTable, используя fetch api

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)
};

Итак, на данный момент мне интересно, возможно ли создать DataTable, используя этот результат. Все примеры, которые я видел в Datatables, используют JQuery и делают вызов ajax. Мне бы хотелось получить несколько советов о том, как сделать таблицу данных без JQuery.

Я очень плохо знаком с JS, поэтому, пожалуйста, прости, если это плохой вопрос. Я просто пытаюсь научиться этому.

Answer 1

Вы можете использовать DataTable следующим образом для данных, поступающих из API:

Вы можете использовать следующую опцию, чтобы отключить раскрывающийся список Show Entries:

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>