Добавить столбцы и разделить по категориям

Question

У меня есть таблица данных, которая использует стандартные функции (нумерация страниц, сортировка, поиск, диапазон дат и т. Д.), Но мне также нужно иметь часть внизу таблицы, которая отображает общую зарплату каждого офиса.Вывод (в идеале) должен выглядеть примерно так, если бы вы искали, скажем, «инженера»:

• Лондон: 295 500
• Сан-Франциско: 409 350
• Сингапур: 234 500 долл. США
• Токио: 139 575 долл. США
• Эдинбург: 103 600 долл. США
• Нью-Йорк: 125 250 долл. США
• Всего часов: 1 707 775,00 долл. США

IЯ испробовал несколько разных подходов, но, честно говоря, мои знания сценариев отсутствуют, и я не в себе.Кто-нибудь может указать мне правильное направление, как решить эту проблему?

Вот мой сценарий:

"footerCallback": function (row, start, end, display) {
                var api = this.api(),
                    data;

                // Remove the formatting to get integer data for summation
                var intVal = function (i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                            i : 0;
                };


                // ************NOT WORKING************ \\   
                // Total by category

                // First Attempt 
                if (api.column(5,
                    {
                    search: 'applied'
                    })
                    .data()
                    .length) {
                    var byCategory = api
                        .rows()
                        .data()
                        .reduce(function (a, c) {
                            a[c[7]] = a[c[7]] || 0;
                            a[c[7]] += intVal(c[5]);
                            return a;
                        },
                        {});
                }
                else {
                    byCategory = 0;
                }
                console.clear();
                console.dir('by category', byCategory); 
                /*
                // Second Attempt
                if (api.column(5, {
                    search: 'applied'
                }).data().length) {
                    var byCategory = api
                        .rows(5, {
                            search: 'applied'
                        })
                        .data()
                        .reduce(function (category, hours) {
                            category[hours[7]] = category[hours[7]] || 0;
                            category[hours[7]] += intVal(hours[5]);
                            return category;
                        }, {});
                }
                else {
                    byCategory = 0;
                }
                console.clear();
                console.dir('by category', byCategory); */
                // ************NOT WORKING************ \\  

                // Third Attempt
                /*var byCategory = api
                    .rows()
                    .data()
                    .reduce(function (a, c) {
                    a[c[7]] = a[c[7]] || 0;
                    a[c[7]] += intVal(c[5]);

                        for (var key in byCategory) {
                            if (byCategory.hasOwnProperty(key)) {
                                console.log(key + " -> " + byCategory[key]);
                            }
                        }                    
                }, {}); */

                // Total over all pages
                total = api
                    .column(5)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Total over all filtered pages
                if (api.column(5, {
                    search: 'applied'
                }).data().length) {
                    pageTotal = api
                        .column(5, {
                            search: 'applied'
                        })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        });
                } else {
                    pageTotal = 0;
                }                 

                // Update footer
                $(api.column(5).footer()).html(                    
                    pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)' + '<br>' + Object.entries(byCategory) + ' hours'
                    //pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)' + '<br>' + Object.keys(byCategory).map(key => { console.log(key, byCategory[key]) }) + ' hours'
                    //pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)' + '<br>' + Object.keys(byCategory).forEach(key => { console.log(key, byCategory[key]) }) + ' hours' 
                );
            }

Вот ссылка на мой jsfiddle: https://jsfiddle.net/l337method/hfyo90w7/

Answer 1

Вы можете рассчитать сумму заработной платы по офисам, используя приведенный ниже пример кода, как указано выше здесь , который вы можете изменить в соответствии со своими потребностями.Замените 1 номером столбца, с которым вы хотите сравнить данные.

 total = api.cells( function ( index, data, node ) {
                        return api.row( index ).data()[1] === 'textA' ?
                            true : false;
                    }, 0 )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              } );

Если быть более точным: вы можете сделать что-то вроде this , вы можете использовать эту функцию для суммирования значений,смотрите @davidkonrad для того, что именно вы хотите с фильтром.

$("#example").on('search.dt', function() {
    alert(table.column( 0, {page:'current'} ).data().sum() );
});

Answer 2

Вы действительно должны рассмотреть возможность использования небольшого плагина sum().В вашем случае все, что вам нужно дальше, это что-то вроде

drawCallback: function() {
  var sum = this.api().column( 5, { search:'applied', page: 'all' }).data().sum();
  $( this.api().column(5).footer() ).text(
    '$'+Number(sum.toFixed(1)).toLocaleString()
  );
}

. Вы можете перевести это в " получить сумму всех значений столбца (5) со всех страниц, но только тех, которые неотфильтровано".drawCallback будет запускаться каждый раз, когда вы будете искать, фильтровать и т. Д.

Вот раздвоенная версия вашей скрипки -> https://jsfiddle.net/7cjL35dr/

Код был немногосбивает с толку, поэтому я попытался очистить, прежде чем добавить плагин sum() и drawCallback.