Contexte
J'utilise des tables de données pour récupérer des données à partir d'une API et les afficher. Je veux ajouter une colonne à la volée qui est une somme de deux autres colonnes. Par exemple, disons que je veux créer une colonne appelée "aléatoire" qui additionne les données de la colonne confirmée et de la mort, comment puis-je le faire?
CODE HTML
<table id="myTable"></table>
<div id="loadingLabel">Loading...</div>
CODE 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();
Voici JSFIDDLE
Tout d'abord, je recommanderais d'utiliser l' ajax
option DataTables pour éviter d'autres problèmes avec les données extraites de manière asynchrone.
Pour résoudre votre problème majeur, ajoutez simplement une autre définition de colonne et utilisez l' columns.data
option avec une fonction comme paramètre:
$('#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>
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots