Условное форматирование строк jQuery DataTable, общая сумма по столбцу

У меня есть две задачи в DataTables:

  1. To display green row if 'amount' field value is less than 500 and red if amount is more than 5000
  2. To display sum by 'amount' column at the bottom

Я получаю вывод, если я вызываю каждую функцию по отдельности, но если я пытаюсь вызвать их вместе, я не получаю результата.

   var table=$('table.display').DataTable(
    {"fnRowCallback": function( nRow, aData, iDisplayIndex, 
    iDisplayIndexFull )
    {
       if (aData[5]<500){
       $('td', nRow).css('background-color', 'Orange');}
       else if (aData[5]>5000){$('td', nRow).css('background-color', '#9EF395');}}
    "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(2)
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
        pageTotal = api
            .column( 2, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
        $( api.column( 2 ).footer() ).html(''+pageTotal +' ( '+ 
        total +' total)');}});} );
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
663
2

Ответы 2

Ну вот:

//source data
var myData = [
	{item: 'apple', amount: 250},
  {item: 'pear', amount: 570},
  {item: 'pinaple', amount: 6700},
  {item: 'banana', amount: 140}
];
//data table initialization
var dataTable = $('#mytable').DataTable({
	sDom: 't',
  data: myData,
  columns: [
  	{data: 'item', title: 'item'},
    {data: 'amount', title: 'amount'}
  ]
});
//append sum
$('#mytable').append(`<tfoot>${Array(dataTable.columns().count()).fill('<th></th>').join('')}</tfoot>`);
var sum = dataTable.column(1).data().reduce((acc, entry) => acc+=entry);
$('#mytable tfoot th').eq(1).text(sum);
//conditional formatting
dataTable.rows().every(function(){
	let color = this.data().amount > 5000 ? 'red' : this.data().amount < 500 ? 'green' : 'unset';
  $(this.node()).css('background-color', color);
});
<!doctype html>
<html>
<head>
  <script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script 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>

Сделайте этот пример:

 const Table = $('#foo').DataTable({
 . . . . . .,
 . . . . . .,
 drawCallback: function(){
   Table.columns(5, {
     page: 'current'
   }).every(function() {
     var sum = this
     .data()
     .reduce(function(a, b) {
        var x = parseFloat(a) || 0;
        var y = parseFloat(b) || 0;
        return x + y;
     }, 0);
     console.info(sum);
   $(this.footer()).html(sum);
   });
  }
});

в данном случае столбец был столбцом номер 5

Другие вопросы по теме