javascript - 创建一列,该列是数据表中其他两列的总和
问题描述
背景
我正在使用数据表从api获取数据并显示它。我想动态添加一列,它是其他两列的总和。例如,假设我想创建一个名为“随机”的列,它将确认列中的数据和死亡相加,我该怎么做?
代码
<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
解决方案
首先,我建议使用 DataTablesajax
选项来避免异步获取数据的进一步问题。
要解决您的主要问题,只需添加另一个列定义并使用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>
推荐阅读
- wix - 自定义操作后关闭 WiX 安装程序对话框
- uipath - 如何使用 UIpath 合并 2 个 excel 文件数据
- javascript - Mongo聚合函数对集合中匹配查询的变量求和
- node.js - “错误:命令失败:...”当我使用 exec / execSync 执行命令时
- angular - 是否有任何库可用于读取 Angular 中的 SSL 证书信息?
- javascript - 点击外部时如何关闭侧边栏?
- sql - 从单个日期列获取天数的问题
- android - Dualshock 5 和安卓
- javascript - 是的,带有反应钩子形式的条件基础验证
- javascript - 在 axios 请求后更新 React Hook