В следующем примере показан базовый подход c.
Конечный результат выглядит следующим образом: обратите внимание, что при суммировании процентов вы можете получить небольшую ошибку округления:
Код выглядит следующим образом:
ОБНОВЛЕНИЕ - возникла проблема с моим исходным решением - оно использовалось jQuery для заполнения ячеек DataTable рассчитанными процентами. Это означало, что DataTables не отвечали на сортировку / фильтрацию для столбца процентов. Лучше использовать функции DataTables для заполнения ячеек данных.
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr><th>ID</th><th>Amount</th><th>Percent</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>123.4</td><td class="percent"></td></tr>
<tr><td>2</td><td>234.5</td><td class="percent"></td></tr>
<tr><td>3</td><td>543.21</td><td class="percent"></td></tr>
<tr><td>4</td><td>76</td><td class="percent"></td></tr>
<tr><td>5</td><td>87</td><td class="percent"></td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
// wait for table and data to finish being initialized:
"initComplete": function( settings, json ) {
populatePercentages();
}
});
function populatePercentages() {
var total = 0.0;
// first calcuate the total:
$('#example').DataTable().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
// assumes amounts are not null, all numeric, and are in column 2:
total = total + Number(this.data()[1]);
});
// then calculate the percentage for each row:
$('#example').DataTable().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
var amount = this.data()[1];
// calculate percent to 2 decimal places:
var percentage = Math.round((amount / total) * 10000) / 100;
var cells = $('#example').DataTable().cells(rowIdx, 2);
cells.every( function () {
this.data(percentage);
});
});
}
});
</script>
</body>
Обращает на себя внимание:
1) Используется класс «процентов» для ячеек, в которых будут отображаться проценты. Это облегчает выбор.
2) Вы можете сделать что-то подобное (1) и для ячеек сумм. Я не здесь.
3) Код дважды просматривает данные таблицы: один раз для расчета общей суммы; и снова, чтобы вычислить проценты.
4) Вам потребуется скорректировать предположения о смещениях столбцов, чтобы они соответствовали дизайну вашей таблицы.
5) Для обработки требуется дополнительная проверка, которая действительно должна быть добавлена отсутствующие или нечисловые данные c, чтобы сделать код менее хрупким.
Обработка случая, когда применяется поиск:
Фильтрация:
Приведенное выше решение может быть улучшено для пересчета процентов при фильтрации данных.
1) Есть два места, где используется функция rows(). В обоих местах измените это на следующее: rows( { search: 'applied' } ). Это обеспечит учет только видимых строк при расчете процентов.
2) Добавьте новый раздел кода для обработки событий keyup для поля поиска (фильтра). В моем случае селектор для этого элемента управления вводом, как показано ниже, - но это нужно будет отредактировать для других таблиц данных с другими идентификаторами (идентификатор таблицы моего примера example):
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
...
});
function populatePercentages() {
...
}
// catch filter events and re-calculate percentages accordingly:
$('div#example_filter.dataTables_filter > label > input').keyup(function (e) {
populatePercentages();
});
});
</script>
С этими изменениями отфильтрованный список будет выглядеть так:
