问题
I am really struggling with some code. I am trying to get the total of a specific column in a table, my code is below.
It works in terms of providing me the total of the column - but when I filter the table, the total amount remains the same and doesn't change when filtered.
For example, when I load the page - the sum of the transaction_amount column amounts to 99 - but when I filter this to search for a different account in the filter, it still throws 99 as the sum. This is probably really simple, but I have been struggling for some time now. Hoping you can help?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container box">
<h3 align="center">How to Get SUM with Datatable Server-side-processing in PHP</h3>
<br />
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th> Date</th>
<th>Account</th>
<th> Transaction Name</th>
<th> Type</th>
<th>Method</th>
<th>Amount</th>
<th> More</th>
</tr>
</thead>
<?php
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc()) {
?>
<tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>">
<td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
<td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
<td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
<td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
<td width="11%"class="table table-bordered table-striped"><?php echo $row["type"]; ?></td>
<td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
<td class="table table-bordered table-striped" align = "" colspan="2">
<a <a href="" type="link" class="" data-toggle="modal" data-target="#modal-default<?php echo $row["id"]; ?>"> Details</a> </a>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
</tr>
</tfoot>
回答1:
There are a lot of errors in HTML code in your code ... I wonder how it's running. </head> is written twice. <a> is added inside another <a>. <tr> is not closed. at the end. And other you have not closed the loop. Maybe that's why you could have been facing these issues. Rest, We need to check the filter code to tell in detail.
I have rectified your issues below.
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
</script>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Date</th>
<th>Account</th>
<th>Transaction Name</th>
<th>Type</th>
<th>Method</th>
<th>Amount</th>
<th>More</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
?>
<tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>">
<td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
<td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
<td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
<td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
<td width="11%"class="table table-bordered table-striped"><?php echo $row["type"]; ?></td>
<td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
<!-- action -->
<td class="table table-bordered table-striped" align = "" colspan="2">
<a href="" type="link" class="" data-toggle="modal" data-target="#modal-default<?php echo $row["id"]; ?>"> Details</a>
</td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
</tr>
</tfoot>
</table>
Updated Answer as per your requirement:
Give a class to the amount and in the js function, add the data of that class only.
<script>
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn('.cal_amt');
});
});
function calculateColumn(index) {
var total = 0;
$(index).each(function() {
var value = parseInt($(this).text());
if (!isNaN(value)) {
total += value;
console.log(total);
}
});
$('.show_amt').text('Total: ' + total);
}
</script>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Date</th>
<th>Account</th>
<th>Transaction Name</th>
<th>Type</th>
<th>Method</th>
<th>Amount</th>
<th>More</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
?>
<tr class="table table-bordered table-striped" id="row-<?php echo $row["id"]; ?>">
<td style="width: 11%" class="table table-bordered table-striped"><?php echo $row["submitted_date"]; ?></td>
<td style="width: 11%"class="table table-bordered table-striped" > <?php echo $row["posting_account_number"]; ?></td>
<td style="width: 45%"class="table table-bordered table-striped"><?php echo $row["transaction_name"]; ?></td>
<td style="width: 22%"class="table table-bordered table-striped"><?php echo $row["method"]; ?></td>
<td width="11%"class="table table-bordered table-striped cal_amt"><?php echo $row["type"]; ?></td>
<td class="table table-bordered table-striped"><?php echo $row["transaction_amount"]; ?></td>
<!-- action -->
<td class="table table-bordered table-striped" align = "" colspan="2">
<a href="" type="link" class="" data-toggle="modal" data-target="#modal-default<?php echo $row["id"]; ?>"> Details</a>
</td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="show_amt">Total:</td>
<td></td>
</tr>
</tfoot>
</table>
来源：https://stackoverflow.com/questions/59850103/unable-to-recalculate-the-total-sum-of-a-column-on-filtering-in-php