How to multiply and Sum 2 columns of datatables using jquery? - Datatables - javascript

I want to show the result by using JQuery
I'm using dataTables library for table to show the result. I want to apply following computation on 2 columns using datatables jquery or ajax like
I have two arrays var arr1 = [2,3,4,5]; and var arr2 = [4,3,3,1];
(4*2+3*3+4*3+5*1) Total=34
Using DataTables for this table
This is the pic of table result format i want to show like.
$(document).ready(function() {
var t = $('#example').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
"order": [
[1, 'asc']
]
});
t.on('order.dt search.dt', function() {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<table width="100%" class="display" cellspacing="0" id="example">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
<th>Current Sales * 1.5</th>
<th>(-) Closing Balance</th>
<th>Current Order</th>
<th>Distributor</th>
<th>Date</th>
</tr>
</thead>
</table>

jsfiddle
$(document).ready(function() {
// multiply nsp and closing balance
$.each(dataSet, function(i, row) {
row.total = row.nsp * row.closing_balance;
});
// Table definition
var dtapi = $('#example').DataTable({
data: dataSet,
"deferRender": false,
"footerCallback": function(tfoot, data, start, end, display) {
var api = this.api();
// adding product of nsp and closing_balance
// here column 5 contains product so change it
// accordingly
var p = api.column(5).data().reduce(function(a, b) {
return a + b;
}, 0)
$(api.column(5).footer()).html(p);
$("#total").val(p);
},
"order": [1],
"columns": [
// rest of the columns
{
data: "id"
}, {
data: "product_name"
}, {
data: "nsp"
}, {
data: "closing_balance",
}, {
data: "date",
}, {
data: "total"
}
]
});
});
// DataTable data set used
var dataSet = [{
"id": "Airi",
"product_name": "Satou",
"nsp": 230,
"closing_balance": 23,
"date": "28th Nov 08",
}, {
"id": "Angelica",
"product_name": "Ramos",
"nsp": "191",
"closing_balance": 131,
"date": "9th Oct 09",
}, {
"id": "Ashton",
"product_name": "Cox",
"nsp": 191,
"closing_balance": 37,
"date": "12th Jan 09",
}];
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table class="display" id="example">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Closing Balance</th>
<th>Date</th>
<th>NSP * Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Closing Balance</th>
<th>Date</th>
<th>NSP * Closing Balance</th>
</tr>
</tfoot>
<tbody></tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />

Related

No data available in first line of data table

After getting the data from firebase, the first line in the datatable is showing no data available.
How should I correct this?
I know I'm only using one data set but I try with 10 data it's still showing that there is no data available in the first line.
I tried everything I know but nothing works.
Output
My js code
$(document).ready(function() {
$('#user_data').DataTable({
dom: 'Bfrtip',
colums: [
{ title: "USN" }, { title: "Email" }, { title: "Name" }, { title: "Password" }
],
targets: -1,
className: 'dt-body-right',
hover: 1,
});
});
var rootRef = firebase.database().ref().child("StudentID");
rootRef.on("child_added", snap => {
USN = snap.child("UserUSN").val();
Email = snap.child("Useremail").val();
Name = snap.child("Username").val();
Password = snap.child("Userpassword").val();
$("#table-body-pengguna").append("<tr><td>" + USN + "</td><td>" + Email +
"</td><td>" + Name + "</td><td>" + Password + "</td></tr>");
})
My html code
<body>
<table id="user_data" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>USN</th>
<th>Email</th>
<th>Name</th>
<th>Password</th>
</tr>
</thead>
<tbody id="table-body-pengguna">
</tbody>
</table>
$(document).ready(function() {
$('#example').DataTable({
"pageLength": 1,
ajax: "https://raw.githubusercontent.com/bmehler/employees/main/personal",
"columns": [{
"data": "id"
},
{
"data": "name"
},
{
"data": "job"
},
]
});
});
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
</tr>
</tfoot>
</table>
Just try this small example.

Footnotes at the bottom of Datatables

My table looks like the following:
And basically I just want a row below the table indicating what the small red 1 and 2 means on their respective rows. I cannot find anything online to do with comments or footnotes in datatables. And I have tried to use the tfoot tag and append it to that but it looks awful (which I assume is datatables not agreeing with that method). Anyone know a solution for this?
HTML:
<table id="'.$id.'" class="table table-bordered dt-responsive" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr>'.$tableHeadings.'</tr>
</thead>
<tbody>
'.$tableContent.'>
</tbody>
<tfoot>
<td>A note here explaining something important.</td>
</tfoot>
</table>
Javascript:
$(function() {
let table;
table = $('#table_preview').DataTable({
"pageLength": 25,
"processing": true,
"ajax": {
"url": '/assets/ajax/table_ajax_handler.php',
"type": "POST",
"data": { action: "getPesticidesForTable" }
},
"columns": [
{ "data": "crop" },
{ "data": "diseases" },
{ "data": "chemical" },
{ "data": "product" },
{ "data": "rate" },
{ "data": "max_no" },
{ "data": "hi" },
{ "data": "mrl" },
{ "data": "pcs_no" },
{ "data": "supplier" }
],
"searchCols": [
{ "search": '<?=$crop?>' || null },
{ "search": '<?=$disease?>' || null }
],
"columnDefs" : [
{
"targets": [0],
"visible": false,
"searchable": true
},
{
"targets": [1],
"visible": false,
"searchable": true
}
],
"order": [[ 2, "asc" ]],
"rowsGroup": [2, 4, 5, 6, 7, 8, 9]
});
});
You can include a <tfoot> section in the HTML, and then use a colspan to allow the text to extend beyond the first column.
For example, assuming a table with 6 columns:
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="2">A note here explaining something important.</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
This looks like the following:
If your text might expand the full width of the footer, then you can use this:
<tfoot>
<tr>
<td colspan="6">A very much longer note here explaining something extremely important.</td>
</tr>
</tfoot>
The number of cells in the footer (also accounting for any colspans) must match the number of cells in a row.
Background note - there are some limitations to using colspans in DataTables. See complex headers for more information.

get the data from the datatable on click

How to get the data object on click the cell.I have created the table and used datatable.I want to get the geography and customer type from the cell click I have tried as
$('#table tbody').on( 'click','td', function () {
//alert ('clicked');
//var data1 = table.row().data();
var data1 = table.row( $(this).parents('tr') ).data();
console.log(data1);
alert( data1[0] +"'s Customer type: "+ data1[ 2 ] );
} );
my table id is table and I got the response as below in console for console.log(data1);
{Geography: "APAC", Current: "0", CustomerType: "AMRevenue", DSO: "0", OverDue: "0"}
getting undefined for data1[0] how to get the geo and customer type
First you need to assign variable as table for datatable initialize & in datatable there is one initComplete method so from this method to get table id by dynamically and then use click method functionality inside initComplete method as below code. So tr of tbody & get value table.row(this).data() method.
I hope below snippet will help you a lot.
$(document).ready(function() {
var table = $('#table').DataTable({
columns: [
{ title: "Geography" },
{ title: "Current" },
{ title: "Customer Type" },
{ title: "DSO" },
{ title: "OverDue" }
],
initComplete: function(settings, json){
$('#'+settings.sTableId+' tbody tr').on('click', function(){
var data = table.row(this).data();
console.clear();
console.log('Geography=> '+data[0]);
console.log('Customer Type=> '+data[2]);
});
}
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<table id="table" class="display" style="width:100%; text-align: center;">
<tbody>
<tr>
<td>APAC</td>
<td>0</td>
<td>AMRevenue</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>CAAP</td>
<td>1</td>
<td>CARevenue</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>JAPA</td>
<td>1</td>
<td>JARevenue</td>
<td>1</td>
<td>0</td>
</tr>
</tbody>
</table>
If you add a click event on td and click on each td, you can be able to get the value of that td's data by using $(this).text();. Have a look at the snippet below and after running the snippet click on the td and see the value.
$("#myTable tbody td").click(function () {
console.log($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table" id="myTable">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Burl</td>
</tr>
</tbody>
</table>
Update: If you click on a specific row and want to get the entire row's data you can simply follow this way:
$("#myTable tbody td").click(function () {
var row = $(this).closest("tr"); // Find the row
var cell1 = row.find("td:nth-child(1)").text(); // Find the first cell's data
var cell2 = row.find("td:nth-child(2)").text(); // Find the second cell's data
console.log(cell1 + " " + cell2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Burl</td>
</tr>
</tbody>
</table>
I think you miss some little thing, just check my code:
<table id="table" class="display" width="100%"></table>
In file javascript:
var dataSet = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
]
];
$(document).ready(function () {
$("#table").DataTable({
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
});
var table = $("#table").DataTable();
$("#table tbody").on("click", "tr", function () {
var data = table.row().data();
console.log('data', data);
alert(data[0] + "'s salary is: " + data[5]);
});
});
You will get your data in row

How to access additional data in JSON requested by Dynatable AJAX call

I am using the dynatable.com plugin to create a table of of schools that are stored in our database. The table can be filtered so does not always show the total number of schools. We do not display a 'number of pupils' column but are trying to show a 'total number of pupils' summary at the bottom of the table.
html on the page is as follows:
<table id="dynatable">
<thead>
<tr>
<th data-dynatable-column="id">ID</th>
<th data-dynatable-column="schoolName">School Name</th>
<th data-dynatable-column="contactName">Contact Name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3"><span id="numPupils"></span> Pupils</td>
</tr>
</tfoot>
</table>
Followed by the JS:
<script>
$('#dynatable').dynatable({
dataset: {
ajax: true,
ajaxUrl: '/my/json/page.json',
ajaxOnLoad: true,
records: []
}
});
</script>
And a sample of the JSON retrieved (note the additional totalNumPupils field at the bottom):
{
"records": [
{
"id": "1",
"schoolName": "ABC School",
"contactName": "Terry"
},
{
"id": "17",
"schoolName": "DEF School",
"contactName": "Claire"
},
{
"id": "45",
"schoolName": "GHI School",
"contactName": "Barry"
}
],
"queryRecordCount": 3,
"totalRecordCount": 450,
"totalNumPupils": 794
}
I am trying to establish if there is a way to access the responseJSON.totalNumPupils that is requested by dynatable's ajax call or whether I would have to perform my own ajax call, ascertain the number of pupils, then pass in the JSON to the dynatable function afterwards?
Please see the code snippet. You can use normal AJAX to get the JSON payload, then populate the dynatable with the data from the AJAX response, while simultaneously accessing the unique totalNumPupils property.
$('#dynatable').dynatable({
dataset: {
ajax: true,
ajaxUrl: 'https://api.myjson.com/bins/1ezw8l',
ajaxOnLoad: true,
records: []
}
});
$.ajax({
url: 'https://api.myjson.com/bins/1ezw8l',
success: function(data) {
$('#dynatable').dynatable({
dataset: {
ajax: false,
records: data
}
});
$('#numPupils').text("Total Pupils: " + data.totalNumPupils);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.css" rel="stylesheet" />
<table id="dynatable">
<thead>
<tr>
<th data-dynatable-column="id">ID</th>
<th data-dynatable-column="schoolName">School Name</th>
<th data-dynatable-column="contactName">Contact Name</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3"><span id="numPupils"></span> Pupils</td>
</tr>
</tfoot>
</table>

Howto use Boostrap table to get column sum using external json file

I have the following bootstrap based table and I am trying to calculate the total MarketValue. Its reading an external json file. but for some reason its not adding the values.
the problem starts when i load an external json. file. How can i fix this?
$.getJSON("json/prep.json", function (jsonFromFile) {
$('#table1').bootstrapTable({
data: jsonFromFile.rows
})
var total1 = data.reduce(function(a, b){
return a + parseFloat(b.LongMarketValue);
}, 0);
document.querySelector('.total1').innerHTML = total1;
});
JSON - prep.json
{
"Name": "Julie Brown",
"Account": "C0010",
"LoanApproved": "12/5/2015",
"LastActivity": "4/1/2016",
"PledgedPortfolio": "1000",
"MaxApprovedLoanAmt": "10000",
"LoanBalance": "1849000",
"AvailableCredit": "2877.824375",
"Aging": "3",
"Brokerage": "My Broker",
"Contact": "oJohnson",
"ContactPhone": "-3614",
"RiskCategory": "Yellow",
"rows": [{
"Account": "086-1234",
"ClientName": "S Smth",
"AccountType": "tail",
"LongMarketValue": "$40000"
}, {
"Account": "086-1235",
"ClientName": "all Sth",
"AccountType": "REV Trust",
"LongMarketValue": "$55000"
},
{
"Account": "086-1236",
"ClientName": "Sly Smith",
"AccountType": "Reail",
"LongMarketValue": "$5500"
}]
}
HTML
<table id="table1">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Account">Account #</th>
<th data-field="ClientName">Client</th>
<th data-field="AccountType">Account Type</th>
<th data-field="MarketValue"> Market Value</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<th></th>
<th> Total <span class="total1"></span></th>
</tr>
</tfoot>
</table>
data is undefined in your code, you have to retrieve data from table or from Json. Also your data returns a string with $ sign, so you have to remove it before parsing it.
Here is a working example.
// Code goes here
$(function () {
$.getJSON("https://api.myjson.com/bins/89vsf", function (jsonFromFile) {
$('#table1').bootstrapTable({
data: jsonFromFile.rows
})
var data = $('#table1').bootstrapTable('getData');
var total1 = data.reduce(function(a, b){
return a + parseFloat(b.LongMarketValue.replace('$',''));
}, 0);
document.querySelector('.total1').innerHTML = total1;
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Account">Account #</th>
<th data-field="ClientName">Client</th>
<th data-field="AccountType">Account Type</th>
<th data-field="LongMarketValue"> Market Value</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<th></th>
<th> Total <span class="total1"></span></th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is a working plunker of the code. http://plnkr.co/edit/PSCR5iS7DSWkuQb1jv5P?p=preview
Hope this helps.

Categories