創建一個列，該列是數據表中其他兩列的總和

Question

背景

我使用的數據表，從一個API獲取數據並顯示它。 我想動態添加一列，它是其他兩列的總和。 例如，說我想創建一個名為“隨機”的列，它將確認列和死亡列中的數據相加，我該怎么做？

代碼

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

代碼

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

Answer 1

首先，我建議使用 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>

Answer 2

只需使用渲染方法將新列添加到列屬性，您就可以使用其他列進行數學選項

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

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