Блог

Главная - Вопросы по программированию - Как мне вычислить среднее значение столбца TR в таблице?

Как мне вычислить среднее значение столбца TR в таблице?

#javascript #jquery #datatables

#javascript #jquery ( jquery ) #таблицы данных

Вопрос:

Я хотел бы вычислить среднее значение столбца «TR» в моей таблице, но я не смог вычислить его с помощью jquery.

мой код jquery:

  table = $("#beyannameTable").DataTable(
             {
                dom: 'Bfrtip',
                buttons: ['excel', 'print'],
                lengthChange: false,
                searching: false,
                paging: false,

                "ajax": {
                    "url": "/Raporlama/ITH_Operasyon",
                    "type": "GET",
                    "datatype": "json",
                    data: { tescilTrh1: $("#tescilTrh1").val(), tescilTrh2: $("#tescilTrh2").val() },
                },

                "columns": [
                    { "data": "Kullanici" },
                    { "data": "Ref" },
                    { "data": "Tescil_No" },
                    { "data": "UNVAN" },
                    { "data": "TescilTarihi" },
                    { "data": "GumrukAdi" },
                    { "data": "Cekildi_Tarih" },
                    { "data": "GumrukEvraklar_Tarih" },
                    { "data": "TR" }
                ]
            });

Комментарии:

1. и где вы пытаетесь вычислить? и какие значения для TR? что такое HTML?

2. Вы хотите, чтобы эти итоги отображались в самой таблице (в ее нижней строке, нижнем колонтитуле) или в отдельном <div> / <span> ?

3. Должны ли эти итоги рассчитываться по всем таблицам или только по видимым? Если последнее, нужно ли вам, чтобы они были пересчитаны при фильтрации?

4. Какой столбец вы пытаетесь вычислить?

5. @GozdeYildiz: Вы решили свою проблему? Был ли мой ответ полезным?

Ответ №1:

Вы можете получить доступ к нужным данным столбца, используя .column().data() метод. Если вам нужно пересчитать среднее значение по столбцу динамически на основе видимых строк, вы можете использовать модификатор селектора {search: 'applied'} в качестве второго аргумента внутри .column() и опции drawCallback для вызова пересчета среднего при каждом повторном рисовании.

Пожалуйста, ознакомьтесь с демонстрацией этого подхода ниже:

 //sample source data
const srcData = [
  {id: 1, name: 'Steve', age: 24},
  {id: 2, name: 'Chris', age: 31},
  {id: 3, name: 'Martha', age: 28},
  {id: 4, name: 'Sam', age: 33}
];
//DataTables initialization
$('#mytable').DataTable({
  dom: 'ft',
  data: srcData,
  columns: [
    {title: 'id', data: 'id'},
    {title: 'name', data: 'name'},
    {title: 'age', data: 'age'}
  ],
  drawCallback: () => $('#avgage').text(avgAge())
});
//average age calculation
function avgAge() {
  let columnData = $('#mytable').DataTable().column(2,{search:'applied'}).data().toArray();
  return Math.round(columnData.reduce((sum, item) => sum =item)/columnData.length);
};
//Append <tfoot>
$('#mytable').append(`<tfoot><tr><td colspan="3">Average age: <span id="avgage">${avgAge()}</span></td></tr></tfoot>`); 
 <!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
Метки: