I am trying to transfer selected rows from one table to another and than get last column values sum.
I use footerCallback to show sum:
$(document).ready(function() {
$('#table2').DataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 8 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 8, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 8 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
} );
} );For transferring i use this code:
function tab1_To_tab2()
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2"),
checkboxes = document.getElementsByName("check-tab1");
console.log("Val1 = " + checkboxes.length);
for(var i = 0; i < checkboxes.length; i++)
if(checkboxes[i].checked)
{
// create new row and cells
var newRow = table2.insertRow(table2.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
cell5 = newRow.insertCell(4);
cell6 = newRow.insertCell(5);
cell7 = newRow.insertCell(6);
cell8 = newRow.insertCell(7);
cell9 = newRow.insertCell(8);
// add values to the cells
cell1.innerHTML = table1.rows[i+1].cells[1].innerHTML;
cell2.innerHTML = table1.rows[i+1].cells[2].innerHTML;
cell3.innerHTML = table1.rows[i+1].cells[3].innerHTML;
cell4.innerHTML = table1.rows[i+1].cells[4].innerHTML;
cell5.innerHTML = table1.rows[i+1].cells[5].innerHTML;
cell6.innerHTML = table1.rows[i+1].cells[6].innerHTML;
cell7.innerHTML = table1.rows[i+1].cells[7].innerHTML;
cell8.innerHTML = table1.rows[i+1].cells[8].innerHTML;
cell9.innerHTML = table1.rows[i+1].cells[9].innerHTML;
// remove the transfered rows from the first table [table1]
var index = table1.rows[i+1].rowIndex;
table1.deleteRow(index);
// we have deleted some rows so the checkboxes.length have changed
// so we have to decrement the value of i
i--;
console.log(checkboxes.length);
}
}But after transferring rows goes under tfoot and sum does not come up, see PIC.
Here is a full code, config.php uses AJAX to path data:
//config.php
$(document).ready(function() {
$.ajax({
type: "GET",
url: "backend-script.php",
dataType: "html",
success: function(data) {
$("#table-container").html(data);
}
})
});
//Base Code
<div align="center">
<input type="text" name="search" id="search" class="form-control" />
</div>
<br />
<?php
include("config.php");
$db=$con;
// fetch query
function fetch_data(){
global $db;
$query="SELECT * from realizacia ORDER BY id DESC";
$exec=mysqli_query($db, $query);
if(mysqli_num_rows($exec)>0){
$row= mysqli_fetch_all($exec, MYSQLI_ASSOC);
return $row;
}else{
return $row=[];
}
}
$fetchData= fetch_data();
show_data($fetchData);
?>
<?php
function show_data($fetchData){
echo '<table id="table1" class="display" border="1">
<thead>
<tr>
<th> <input type="checkbox" id="selectAll"/></th>
<th>ID</th>
<th>საქონელი</th>
<th>კოდი</th>
<th>მყიდველი</th>
<th>თარიღი</th>
<th>ოპერაციის კომენტარი</th>
<th>ერთეულის ფასი</th>
<th>ვალუტა</th>
<th>თანხა</th>
</tr>
</thead>';
if(count($fetchData)>0){
$sn=1;
foreach($fetchData as $data){
echo "
<tbody>
<tr>
<td><input type='checkbox' name='check-tab1' class='form-control'></td>
<td>".$sn."</td>
<td>".$data['saqoneli']."</td>
<td>".$data['nomeri']."</td>
<td>".$data['myidveli']."</td>
<td>".$data['tarigi']."</td>
<td>".$data['operaciis_komentari']."</td>
<td>".$data['erteulis_fasi']."</td>
<td>".$data['valuta']."</td>
<td>".$data['tanxa']."</td>
</tr>";
$sn++;
}
}else{
echo "<tr>
<td colspan='7'>No Data Found</td>
</tr>";
}
echo "
</tbody>
</table>";
}
?>
<html>
<br>
<div class="tab tab-btn">
<button onclick="tab1_To_tab2();">>>>>></button>
</div>
<h1>--------------------------მეორე ცხრილი-----------------------</h1>
<table id="table2" name="tablename" class="secondtable" border="1">
<thead>
<tr>
<th>ID</th>
<th>საქონელი</th>
<th>კოდი</th>
<th>მყიდველი</th>
<th>თარიღი</th>
<th>ოპერაციის კომენტარი</th>
<th>ერთეულის ფასი</th>
<th>ვალუტა</th>
<th>თანხა</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan='8' style='text-align:right'>Total:</th>
<th></th>
</tr>
</tfoot>
</table>
</html>
<script>
function sumOfColumns(){
var totalQuantity = 0;
var totalPrice = 0;
$(".someClass").each(function(){
totalQuantity += parseInt($(this).html());
$(".someTotalClass").html(totalQuantity);
});
$(".classPrice").each(function(){
totalPrice += parseInt($(this).html());
$(".someTotalPrice").html(totalPrice);
});
}
//ჯამი მთავარი ცხრილისთვის
/*
$(function() {
var TotalValue = 0;
$("tr #loop").each(function(index,value){
currentRow = parseFloat($(this).text());
TotalValue += currentRow
});
document.getElementById('total').innerHTML = TotalValue;
});
*/
function tab1_To_tab2()
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2"),
checkboxes = document.getElementsByName("check-tab1");
console.log("Val1 = " + checkboxes.length);
for(var i = 0; i < checkboxes.length; i++)
if(checkboxes[i].checked)
{
// create new row and cells
var newRow = table2.insertRow(table2.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
cell5 = newRow.insertCell(4);
cell6 = newRow.insertCell(5);
cell7 = newRow.insertCell(6);
cell8 = newRow.insertCell(7);
cell9 = newRow.insertCell(8);
// add values to the cells
cell1.innerHTML = table1.rows[i+1].cells[1].innerHTML;
cell2.innerHTML = table1.rows[i+1].cells[2].innerHTML;
cell3.innerHTML = table1.rows[i+1].cells[3].innerHTML;
cell4.innerHTML = table1.rows[i+1].cells[4].innerHTML;
cell5.innerHTML = table1.rows[i+1].cells[5].innerHTML;
cell6.innerHTML = table1.rows[i+1].cells[6].innerHTML;
cell7.innerHTML = table1.rows[i+1].cells[7].innerHTML;
cell8.innerHTML = table1.rows[i+1].cells[8].innerHTML;
cell9.innerHTML = table1.rows[i+1].cells[9].innerHTML;
// remove the transfered rows from the first table [table1]
var index = table1.rows[i+1].rowIndex;
table1.deleteRow(index);
// we have deleted some rows so the checkboxes.length have changed
// so we have to decrement the value of i
i--;
console.log(checkboxes.length);
}
}
$('#selectAll').click(function(event) {
$('table tr:visible :checkbox').prop('checked', this.checked)
});
// Live Search
$(document).ready(function(){
$('#search').keyup(function(){
search_table($(this).val());
});
function search_table(value){
$('#table1 tbody tr').each(function(){
var found = 'false';
$(this).each(function(){
if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)
{
found = 'true';
}
});
if(found == 'true')
{
$(this).show();
}
else
{
$(this).hide();
}
});
}
});
$(document).ready(function() {
$('#table2').DataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 8 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 8, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 8 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
} );
} );
</script><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
table{
display: block;
width: 100%;
height: 300px;
overflow-y: auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
justify-content: center;
align-items: center;
}
.secondtable{
border-collapse:collapse;
margin:auto;
padding:40;
width: calc(100% - 10px);
overflow-y: auto;
clear: both;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
justify-content: center;
align-items: center;
}
table th {
position: sticky;
top: 0;
background: #B0BED9;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;}
.table-data{
position: relative;
left:50px;
top:50px;}
th, td {
padding: 10px;
}
</style>
<body>
<link href='DataTables/datatables.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<!-- jQuery Library -->
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<!-- Datatable JS -->
<script src="DataTables/datatables.min.js"></script>
<div id="table-container"></div>
<script type="text/javascript" src="ajax-script.js"></script>
</body>
</html>Any ideas and help appreciated.
