I have a view like this, but this view I want to convert into datatables which have tfoot and fixed column. I've tried several times, the results are still messy and untidy like datatables in general, and trying to search on the internet, after I tried it still failed too. Please help..
This is the code view..
<div class="content-wrapper">
<div class="content">
<div class="panel">
<div class="table-responsive">
<table class="table table-striped" id="table-report">
<thead>
<tr>
<th rowspan="3" class="fixed-column">No</th>
<th rowspan="3" class="fixed-column text-left">Customer</th>
<?php foreach ($period as $date) { ?>
<th colspan="4"><?= $date->format("l"); ?></th>
<?php } ?>
<th rowspan="2" colspan="3">Total</th>
</tr>
<tr>
<?php foreach ($period as $date) { ?>
<th colspan="4"><?= $date->format("d/m/Y"); ?></th>
<?php } ?>
</tr>
<tr>
<?php foreach ($period as $date) { ?>
<th>Plan Reg</th>
<th class="bg-slate-300">Actual Reg</th>
<th class="bg-slate-300">Actual Additional</th>
<th class="bg-slate">Diff Reg</th>
<?php } ?>
<th>Plan</th>
<th class="bg-slate-300">Actual</th>
<th class="bg-slate">Diff</th>
</tr>
</thead>
<tbody>
<?php if ($customers) {
foreach ($customers->result() as $key => $customer) { ?>
<tr class="text-center">
<td class="fixed-column"><?= $key + 1; ?></td>
<td style="white-space: nowrap"
class="fixed-column text-left"><?= $customer->name; ?></td>
<?php
$data = $this->delivery->summary_data_by_customer($customer->id, $from, $to);
$num_data = $data->num_rows();
$row = 0;
$total_plan_reg = 0;
$total_actual_reg = 0;
$total_additional = 0;
$total_diff = 0;
foreach ($period as $date) {
$numdiff = 0;
if ($num_data > $row) {
$d = $data->row($row);
if ($d->date == $date->format("Y-m-d")) {
$numdiff = ($d->actual - $d->plan);
$total_plan_reg += $d->plan;
$total_actual_reg += $d->actual;
$total_additional += $d->additional;
$total_diff += ($d->actual + $d->additional) - $d->plan;
?>
<td><?= ($d->plan) ? number($d->plan) : 0; ?></td>
<td class="bg-slate-300"><?= ($d->actual) ? number($d->actual) : 0; ?></td>
<td class="bg-slate-300"><?= ($d->additional) ? number($d->additional) : 0; ?></td>
<td class="bg-slate"><?= $numdiff; ?></td>
<?php
$row++;
$numdiff = 0;
} else {
?>
<td></td>
<td class="bg-slate-300"></td>
<td class="bg-slate-300"></td>
<td class="bg-slate"></td>
<?php
}
} else {
?>
<td></td>
<td class="bg-slate-300"></td>
<td class="bg-slate-300"></td>
<td class="bg-slate"></td>
<?php
}
}
?>
<td><?= ($total_plan_reg); ?></td>
<td class="bg-slate-300"><?= ($total_actual_reg + $total_additional); ?></td>
<td class="bg-slate-700"><?= ($total_diff); ?></td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
<tfoot>
<tr class="text- ">
<th colspan="2" class="text-right fixed-column">Total</th>
<?php foreach ($period as $date) { ?>
<th></th>
<th class="bg-slate-300"></th>
<th class="bg-slate-300"></th>
<th class="bg-slate"></th>
<?php } ?>
<th></th>
<th class="bg-slate-300"></th>
<th class="bg-slate-700"></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var width = 0;
$('#table-report thead .fixed-column').each(function (e, i) {
width += $(i).width();
})
var $table = $('#table-report');
var $fixedColumn = $table.clone().insertBefore($table).removeAttr('id').addClass('fixed-column');
$fixedColumn.find('th:not(.fixed-column),td:not(.fixed-column)').remove();
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
});
count_total = function () {
var col, total;
for (col = 2; col < $('#table-report tfoot tr').children().size() + 1; col++) {
total = 0;
$('#table-report tbody tr').each(function () {
var row = $(this);
var value = row.children().eq(col).text();
value = (value == '') ? 0 : value;
total += parseFloat(value);
});
// total = (isNaN(total) || !total) ? '' : $.number(total, 2, decimal_separator, thousand_separator);
total = (isNaN(total) || !total) ? '' : total;
$('#table-report tfoot tr').children().eq(col - 1).text(total);
}
}
count_total();