Суммирование скрытого столбца в DataTables после фильтрации

Question

У меня есть таблица данных, в которой есть окно поиска и поиск по столбцу. Во-первых, как я вызываю функцию после каждого поиска, в основном после каждого рисования после поиска. В моей функции я хочу затем просмотреть все соответствующие записи, и если в столбце 5 есть значение, добавить его в счетчик, а если в столбце 6 (который скрыт) есть значение, суммировать его. Я пытаюсь создать панель данных над таблицей данных, которая изменяется в зависимости от отфильтрованных результатов.

Я нашел это для создания функции, когда происходит поиск, но не уверен, что она запускается до или после фильтрации, но не может заставить ее работать:

$("#example").on('search.dt', function() {

// здесь суммируем
});

Если это правильно, как мне просмотреть все отфильтрованные результаты, как указано выше?

Answer 1

Собрал быстрый и грязный пример, чтобы начать. По сути, таблица с функцией 'draw' сработает при поиске или фильтровании события. Оттуда вы перебираете все видимые отфильтрованные строки, используя это: { filter : 'applied'}

Запустите этот фрагмент и найдите "Нью-Йорк". Затем проверьте консоль, чтобы увидеть, как ведут себя данные и числа.

Или эту скрипку, если вы предпочитаете ...

var mytable = new Object();

var tableData = [
    {name: 'Clark Kent', city: 'Metropolis', numCol: '10', numCol2: '6'},
    {name: 'Bruce Wayne', city: 'New York', numCol: '', numCol2: '12'},
    {name: 'Steve Rogers', city: 'New York', numCol: '30', numCol2: '10'},
    {name: 'Peter Parker', city: 'New York', numCol: '44', numCol2: ''},
    {name: 'Thor Odinson', city: 'Asgard', numCol: '55', numCol2: '15'}
	];

mytable = $('#mytable').DataTable({
    "search": {
        "regex": true
    },
	  sDom: 'lrftip',
    data: tableData,
    columns: [
    	{data: 'name', title: 'Name'},
    	{data: 'city', title: 'City'},
      {data: 'numCol', title: 'Number'},
      {data: 'numCol2', title: 'Hidden Num', visible: false}
    ], 
    columnDefs: [
        { className: "sum", "targets": [2] },
    ]
	});
  
   
mytable.on( 'draw', function () {
    console.log( 'Redraw occurred at: '+new Date().getTime() );
    var myCount = 0;
    var totalSum = 0;
    mytable.rows( { filter : 'applied'} ).every(function (rowIdx, tableLoop, rowLoop) {
            var data = this.data();
            
            console.log('num1: ' + data.numCol + ' num2: ' + data.numCol2);
            
            if (data.numCol !== '') {
            		//Add to counter                
                myCount += 1;
            }
            
            if (data.numCol2 !== '') {
            	//Sum it up	
              totalSum += parseInt(data.numCol2); 
            }
            
        });
        console.log('myCount: ' + myCount + ' totalSum: ' + totalSum);
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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">

<div class="table-responsive">

<table id="mytable" class="table nowrap table-hover table-striped dataTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>City</th>
        <th>Number1</th>
        <th>Number2</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot id="mytableFoot">
      <tr>
        <th>Name</th>
        <th>City</th>
        <th>Number1</th>
        <th>Number2</th>
      </tr>
    </tfoot>
  </table>
</div>

Надеюсь, это поможет.