Как создать динамику между двумя таблицами? - PullRequest
0 голосов
/ 14 января 2020

У меня есть json файл, который загружает данные о продажах для городов и продавцов на основе текущего года и годом ранее.

Я создал таблицу, в которой я отображаю общие продажи каждого года каждому продавцу и в последней строке я загружаю сумму всех продавцов, добавленных вместе.

У меня также есть таблица рядом с этой, где я отображаю общие продажи каждого года для каждого города, а в последней строке я несу сумма всех городов вместе.

В итоге, общая сумма всех городов равна общей сумме всех продавцов, как вы можете видеть на изображении ниже:

enter image description here

Мне нужно создать динамизм между этими таблицами, то есть, если я нажму, например, на строку вендора "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: В будущем, рядом с этими таблицами, мне нужно будет вставить график, где я буду загружать данные в график в соответствии со строкой, которая был нажат.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...