создать столбец, который является суммой двух других столбцов в таблицах данных - PullRequest
Новая
       1

создать столбец, который является суммой двух других столбцов в таблицах данных

0 голосов
/ 21 марта 2020

Фон

Я использую , чтобы получить данные из API и отобразить их. Я хочу добавить столбец на лету, который является суммой двух других столбцов. Например, скажем, я хочу создать столбец с именем «random», который суммирует данные из подтвержденного столбца и смерть, как бы я это сделал?

HTML CODE 

<table id="myTable"></table>
    <div id="loadingLabel">Loading...</div>

JS КОД 

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,
    bPaginate: false,
    scrollY:        '50vh',
    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' }
    ]
  });
};
getNewCases();

Здесь JSFIDDLE

Ответы [ 2 ]

1 голос
/ 21 марта 2020

Просто добавьте столбец, новый для атрибута столбцов, с помощью метода рендеринга. Вы можете сделать математические параметры с другими столбцами 

 {data:null,
            title: "random",
            render: function(data, type, row) {
                return parseInt( data.deaths) + parseInt(data.recovered);
            }

https://jsfiddle.net/scxh3ktg/

1 голос
/ 21 марта 2020

Во-первых, я бы порекомендовал использовать опцию DataTables ajax, чтобы избежать дальнейших проблем с асинхронно извлекаемыми данными.

Чтобы решить вашу главную проблему, просто добавьте еще одно определение столбца и используйте опцию columns.data с функцией в качестве параметра: 

$('#myTable').DataTable({
  ajax: {
    url: 'https://covid19.mathdro.id/api/daily/3-18-2020',
    dataSrc: d => d.filter(entry => entry.countryRegion == 'US')
  },
  bLengthChange: false,
  bPaginate: false,
  scrollY:        '50vh',
  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' },
    { data: ({confirmed,deaths}) => Number(confirmed)+Number(deaths), title: 'Random' }
  ]
})
<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script><script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script><script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script> </head><body><table id="myTable"></table></body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...