У меня есть json файл, который загружает данные о продажах для городов и продавцов на основе текущего года и годом ранее.
Я создал таблицу, в которой я отображаю общие продажи каждого года каждому продавцу и в последней строке я загружаю сумму всех продавцов, добавленных вместе.
У меня также есть таблица рядом с этой, где я отображаю общие продажи каждого года для каждого города, а в последней строке я несу сумма всех городов вместе.
В итоге, общая сумма всех городов равна общей сумме всех продавцов, как вы можете видеть на изображении ниже:
Мне нужно создать динамизм между этими таблицами, то есть, если я нажму, например, на строку вендора "Charneca", таблица города будет отображена снова, загружая только города, которые связаны с поставщиком "Charneca", также обновляя общую стоимость из таблицы городов.
Чтобы привести другой пример, то же самое должно произойти и для другой таблицы, если я нажму на город o f "Albufeira", таблица продавцов будет отображена снова, загружая только продавцов, которые связаны с городом "Albufeira", также обновляя общее значение продавцов.
Для удобства просмотра я помещаю код в plunker: http://embed.plnkr.co/ZnCu5U9voDk2kiDWEw3e/
Я действительно не знаю, как это сделать, и вся помощь приветствуется.
Вот мой код, спасибо заранее .
var url = 'http://www.json-generator.com/api/json/get/cffGIwIUVu?indent=2';
fetch(url)
.then(res => res.json())
.then(function(data) {
let responseData = data;
//Reduce function to calculate the total of all sellers together
var reduceSales = responseData.reduce(function(allSales, sales) {
if (allSales.some(function(e) {
return e.vendnm === sales.vendnm;
})) {
allSales.filter(function(e) {
return e.vendnm === sales.vendnm
})[0].Vendas_Ano += sales.Vendas_Ano;
allSales.filter(function(e) {
return e.vendnm === sales.vendnm
})[0].Vendas_Ant += sales.Vendas_Ant
} else {
allSales.push({
vendnm: sales.vendnm,
Vendas_Ano: sales.Vendas_Ano,
Vendas_Ant: sales.Vendas_Ant
})
}
return allSales;
}, []);
//Reduce function to calculate the total of all cities together
var reduceCity = responseData.reduce(function(allSales, sales) {
if (allSales.some(function(e) {
return e.zona === sales.zona;
})) {
allSales.filter(function(e) {
return e.zona === sales.zona
})[0].Vendas_Ano += sales.Vendas_Ano;
allSales.filter(function(e) {
return e.zona === sales.zona
})[0].Vendas_Ant += sales.Vendas_Ant
} else {
allSales.push({
zona: sales.zona,
Vendas_Ano: sales.Vendas_Ano,
Vendas_Ant: sales.Vendas_Ant
})
}
return allSales;
}, []);
//Function to add sellers grand totals
const mapSales = reduceSales.map(function(item) {
var sellersSalesYear = 0;
for (let i = 0; i < reduceSales.length; i++) {
sellersSalesYear = sellersSalesYear + reduceSales[i].Vendas_Ano;
}
var sellersSalesLastYear = 0;
for (let i = 0; i < reduceSales.length; i++) {
sellersSalesLastYear = sellersSalesLastYear + reduceSales[i].Vendas_Ant;
}
return {
vendnm: item.vendnm,
Vendas_Ano: Number(Math.round(item.Vendas_Ano * 100) / 100).toLocaleString("es-ES", {
minimumFractionDigits: 2
}),
Vendas_Ant: Number(Math.round(item.Vendas_Ant * 100) / 100).toLocaleString("es-ES", {
minimumFractionDigits: 2
}),
Total1: Number(Math.round(sellersSalesYear * 100) / 100).toLocaleString("es-ES", {
minimumFractionDigits: 2
}),
Total2: Number(Math.round(sellersSalesLastYear * 100) / 100).toLocaleString("es-ES", {
minimumFractionDigits: 2
}),
}
});
//Function to add cities grand totals
const mapCity = reduceCity.map(function(item) {
var citiesSalesYear = 0;
for (let i = 0; i < reduceCity.length; i++) {
citiesSalesYear = citiesSalesYear + reduceCity[i].Vendas_Ano;
}
var citiesSalesLastYear = 0;
for (let i = 0; i < reduceCity.length; i++) {
citiesSalesLastYear = citiesSalesLastYear + reduceCity[i].Vendas_Ant;
}
return {
zona: item.zona,
Vendas_Ano: Number(Math.round(item.Vendas_Ano * 100) / 100).toLocaleString("es-ES", {
minimumFractionDigits: 2
}),
Vendas_Ant: Number(Math.round(item.Vendas_Ant * 100) / 100).toLocaleString("es-ES", {
minimumFractionDigits: 2
}),
Total1: Number(Math.round(citiesSalesYear * 100) / 100).toLocaleString("es-ES", {
minimumFractionDigits: 2
}),
Total2: Number(Math.round(citiesSalesLastYear * 100) / 100).toLocaleString("es-ES", {
minimumFractionDigits: 2
}),
}
});
//Function to create salesperson table in DOM
$(document).ready(function() {
$("#tableSales").append('<tfoot><th></th><th></th><th></th></tfoot>');
$('#tableSales').DataTable({
"data": mapSales,
"columns": [{
"data": "vendnm",
title: 'Salesman'
},
{
"data": "Vendas_Ano",
title: 'Sales Year'
},
{
"data": "Vendas_Ant",
title: 'Sales Last Year'
},
],
"footerCallback": function(row, data, start, end, display) {
var api = this.api(),
data;
var intVal = function(i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
total = api
.column(1)
.data(reduceSales)
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0)
total = api
.column(2)
.data(reduceSales)
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0)
$(api.column(0).footer()).html(
'Total'
);
$(api.column(1).footer()).html(
mapSales[0].Total1 + '€'
);
$(api.column(2).footer()).html(
mapSales[0].Total2 + '€'
);
},
"bLengthChange": false,
"bPaginate": false,
"bFilter": false,
"info": false,
});
});
//Function to create cities table in DOM
$(document).ready(function() {
$("#tableCities").append('<tfoot><th></th><th></th><th></th></tfoot>');
$('#tableCities').DataTable({
"data": mapCity,
"columns": [{
"data": "zona",
title: 'City'
},
{
"data": "Vendas_Ano",
title: 'Sales Year'
},
{
"data": "Vendas_Ant",
title: 'Sales Last Year'
},
],
"footerCallback": function(row, data, start, end, display) {
var api = this.api(),
data;
var intVal = function(i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
total = api
.column(1)
.data(reduceCity)
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0)
total = api
.column(2)
.data(reduceCity)
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0)
$(api.column(0).footer()).html(
'Total'
);
$(api.column(1).footer()).html(
mapCity[0].Total1 + '€'
);
$(api.column(2).footer()).html(
mapCity[0].Total2 + '€'
);
},
"bLengthChange": false,
"bPaginate": true,
"bFilter": false,
"info": false,
});
});
});
<head>
<style>
body {
font-size: 14px !important;
}
th,
td {
border: 1px solid #cccccc;
padding: 8px;
}
th {
font-weight: bold;
text-transform: uppercase;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr:hover {
background-color: black !important;
color: white;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<title>Document</title>
</head>
<body>
<div>
<div style="margin: 50px;" class="row justify-content-md-center">
<div class="col-6">
<h3>Sales</h3>
<table id="tableSales"></table>
</div>
<div class="col-6">
<h3>Cities</h3>
<table id="tableCities"></table>
</div>
</div>
</div>
</body>
PS: В будущем, рядом с этими таблицами, мне нужно будет вставить график, где я буду загружать данные в график в соответствии со строкой, которая был нажат.