创建一个列，该列是数据表中其他两列的总和

Question

Background背景

I am using datatables to fetch data from an api and display it.我使用的数据表，从一个API获取数据并显示它。 I want to add a column on the fly that is a sum of two other columns.我想动态添加一列，它是其他两列的总和。 For instance say i want to create a column called "random" that adds up data from column confirmed and death how would i do it?例如，说我想创建一个名为“随机”的列，它将确认列和死亡列中的数据相加，我该怎么做？

HTML CODE代码

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

JS CODE代码

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

Here is JSFIDDLE这是JSFIDDLE

Answer 1

First off, I would recommend to make use of DataTables ajax option to avoid further issues with asynchronously fetched data.首先，我建议使用 DataTables ajax选项来避免异步获取数据的进一步问题。

To solve your major problem simply add another column definition and make use of columns.data option with a function as parameter:要解决您的主要问题，只需添加另一个列定义并使用带有函数作为参数的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>

Answer 2

Just add column new to columns attribute with render method u can make math options with another columns只需使用渲染方法将新列添加到列属性，您就可以使用其他列进行数学选项

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

https://jsfiddle.net/scxh3ktg/ https://jsfiddle.net/scxh3ktg/

创建一个列，该列是数据表中其他两列的总和

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-03-20 21:51:18

解决方案2
1 2020-03-20 22:03:53

创建一个列，该列是数据表中其他两列的总和

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-03-20 21:51:18

解决方案2 1 2020-03-20 22:03:53

解决方案1
1 已采纳 2020-03-20 21:51:18

解决方案2
1 2020-03-20 22:03:53