I am trying to create a live crypto currency price chart with jQuery, Javascript, Ajax and Websocket. Datatable is using for sorting purpose. Live crypto currency price is always appearing in <input>. It will always work outside of the datatable <table>. But if I put <input> in the datatable <table>, live price is not appearing. I searched in google and found the solution. DOM function needed to getting live number value in datatable <input>. I am using this https://datatables.net/examples/advanced_init/stocks.html datatable for my project. I got DOM javascript code from https://datatables.net/examples/plug-ins/dom_sort.html for live DOM number sorting.
<script type="">
$.fn.dataTable.ext.order['dom-text-numeric'] = function (settings, col) {
return this.api()
.column(col, { order: 'index' })
.nodes()
.map(function (td, i) {
return $('input', td).val() * 1;
});
};
$(document).ready(function () {
$('#example').DataTable({
columns: [
{ orderDataType: 'dom-text-numeric' },
],
});
});
</script>
These are the javascript code for live DOM soring. I don't know how/where put this codes in my Ajax javascript file.
In the ajax javascript fie, I added,
return type === 'display' ?
'<input type="text" id="btc-price" value="">' :
val;
So <input> is appearing in web page without live crypto price. I think DOM is missed in this datatable.
I tried many times. But all my efforts was failure.. Codepen preview: https://codepen.io/themecode/pen/VwxPOpJ Please help me..
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
</head>
<body>
<!-- **************************************** -->
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Price</th>
<th>Chnge</th>
<th>Last</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Price</th>
<th>Chnge</th>
<th>Last</th>
</tr>
</tfoot>
</table>
<!-- **************************************** -->
<input type="text" id="btc-price" value="">
<input type="text" id="ltc-price" value="">
<!-- **************************************** -->
<script type="text/javascript">
const streams = {
'btcusdt#trade': { name: 'btc', input: document.getElementById('btc-price') },
'ltcusdt#trade': { name: 'ltc', input: document.getElementById('ltc-price') },
};
const streamParams = Object.entries(streams).map(([streamId]) => streamId).join(`/`);
const streamUrl = `wss://stream.binance.com:9443/stream?streams=${streamParams}`;
const wss = new WebSocket(streamUrl);
wss.onmessage = (event) => {
const eventData = JSON.parse(event.data);
const streamId = eventData.stream;
const latestPrice = Number.parseFloat(eventData.data.p);
const lastPrice = streams[streamId].lastPrice || latestPrice;
// compare latest and last prices
const inputClass = latestPrice > lastPrice
? 'inc'
: latestPrice < lastPrice ?
'dec' : '';
// update relevant input with value
const input = streams[streamId].input;
// remove any existing classes
input.classList.remove('inc','dec');
// add inc/dec class only
if (inputClass)
input.classList.add(inputClass);
// set input value
input.value = latestPrice.toFixed(2);
// save the latest price for this coin.
streams[streamId].lastPrice = latestPrice;
// Call calculators.change() here - I can't actually add it because it will break the snippet.
// calculators.change;
};
</script>
<script type="text/javascript">
$(document).ready(function() {
var stock_data = [
{
"name": "ACME Gadgetsrrrrrrr",
"symbol": "AGDTS",
"last": [2, 9, 14, 18, 23, 27, 39]
},
{
"name": "Spry Media Productions",
"symbol": "SPMP",
"last": [1.12, 1.11, 1.08, 1.08, 1.09, 1.11, 1.08]
},
{
"name": "Widget Emporium",
"symbol": "WDEMP",
"last": [3.40, 3.39, 3.46, 3.51, 3.50, 3.48, 3.49]
},
{
"name": "Sole Goodman",
"symbol": "SGMAN",
"last": [16.20, 16.40, 16.36, 16.35, 16.61, 16.46, 16.19]
},
{
"name": "Stanler Bits and Bobs",
"symbol": "SBIBO",
"last": [82.51, 83.47, 83.40, 83.68, 83.81, 83.29, 83.72]
}
];
let table = $('#example').DataTable({
ajax: function(dataSent, callback, settings) {
let data = this.api().ajax.json();
if(data == undefined) {
data = stock_data; // ======================= data = stock_data;
} else {
data = data.data;
for(i = 0; i < data.length; i++) {
data[i].last.push(data[i].last.shift())
}
}
callback({data: data});
},
paging: false,
initComplete: function() {
let api = this.api();
setInterval(function() {
api.ajax.reload();
}, 3000);
},
drawCallback: function() {
$('.sparkline')
.map(function() {
return $('canvas', this).length ? null : this;
})
.sparkline('html', {
type: 'line',
width: '250px'
})
},
columns: [
// ## 01 // Price
{
data: null, // Price
render: function(data, type, row, meta) {
return row.last[row.last.length - 1].toFixed(2);
}
},
// ## 02 // Difference
{
data: null, // Difference
render: function(data, type, row, meta) {
var val = (row.last[row.last.length - 1] - row.last[row.last.length - 2]).toFixed(2);
var colour = val < 0 ? 'red' : 'green'
return type === 'display' ?
'<input type="text" id="btc-price" value="">' :
val;
}
},
// ## 03 // Price
{
data: null, // Price
render: function(data, type, row, meta) {
return row.last[row.last.length - 1].toFixed(2);
}
},
// ## 04 // Difference
{
data: null, // Difference
render: function(data, type, row, meta) {
var val = (row.last[row.last.length - 1] - row.last[row.last.length - 2]).toFixed(2);
var colour = val < 0 ? 'red' : 'green'
return type === 'display' ?
'<span style="color:' + colour + '">' + val + '</span>' :
val;
}
},
// ## 05 // Price
{
data: null, // Price
render: function(data, type, row, meta) {
return row.last[row.last.length - 1].toFixed(2);
}
}
]
});
});
</script>
Related
I'm currently working on a condominum program. The goal of this issue is when one Apartment row is clicked on the Parent table all the months - related to that apartment - must be displayed on the Child table.
The click/select/deselect is working fine but I can not obtain all the twelfth months.
This is my actual tables layout (example 1):
And this is my actual tables layout (example 2):
My code to childTable is:
var childTable = $('#child').DataTable( {
"pageLength": 12,
ajax: {
url: "ajax/query_pagquotas.php", // This is the URL to the server script for the child data
dataSrc: function (data) {
var selected = parentTable.row( { selected: true } );
if ( selected.any() ) {
var ID = selected.data().ID;
for (var i=0; i < data.data.length; i++) {
var rows = data.data[i];
if (rows.ID === ID) {
return [rows];
}
}
} else {
return [];
}
}
},
columns: [
{ "data": "ID" },
{ "data": "DATA" },
{ "data": "MES" },
{ "data": "VALOR" },
{ "data": "METODO" },
{ "data": "ESTADO" },
{ "data": "OBS" }
]
} );
Thanks for your help Masters
[edited]
Ups! If condition at the end does not make the 'deselect' work...
This is my full code at the moment:
$(document).ready(function() {
var parentTable = $('#parent').DataTable( {
ajax: "ajax/dbfraccoes.php",
"language": {
"sSearchPlaceholder": "Apto ou Proprietário...",
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Portuguese.json",
},
"processing": true,
"scrollY": "200px",
"scrollCollapse": true,
"paging": false,
pageLength: 5,
select: {
style: 'single'
},
columns: [
{ "data": "ID","searchable": false },
{ "data": "APTO" },
{ "data": "FRACCAO"},
{ "data": "PROPRIETARIO" },
{ "data": "VALOR_QUOTA","searchable": false, className: "cssValores"},
{ "data": "OBS" }
]
} );
// tabela Child ------------------------------------------
var childTable = $('#child').DataTable( {
columnDefs: [{
targets: 6,
render: function(data, type, row, meta){
if(type === 'display' && data === 'EMITIDO'){
data = '<td style="text-align:center"><button type="button" class="btn btn-info btn-sm cssButton center" title="Emitido Aviso de Recibo a pagamento">EMITIDO</button></td>'+
'<div class="links">' +
'Editar ' +
'</div>';
}else if (type === 'display' && data === 'AGUARDA'){
data = '<td style="text-align:center"><button type="button" class="btn btn-warning btn-sm cssButton center" title="Limite de pagamento ultrapassado. Em período de tolerância.">AGUARDA</button></td>'+
'<div class="links">' +
'<a href="<?php echo WEB_URL;?>credit_debit/gest_quotas.php?spid='+
row['pqid']+'#insert">Editar</a> ' +
'</div>';
}
return data;
}
}],
"paging": false,
"searching": false,
"language": {
"zeroRecords": "<center>Clique na tabela acima, na linha do apartamento que pretende. <br/>Os dados da fracção/apartamento selecionado acima serão reflectidos nesta tabela</center>",
},
ajax: {
url: "ajax/query_pagquotas.php",
dataSrc: function (data) {
var selected = parentTable.row( { selected: true } );
if ( selected.any() ) {
var rows = []; // create an empty array
var ID = selected.data().ID;
for (var i=0; i < data.data.length; i++) {
var row = data.data[i];
if (row.ID === ID) {
rows.push(row);
}
}
}
return rows;
},
},
columns: [
{ "data": "pqid" },
{ "data": "ID"},
{ "data": "DATA" },
{ "data": "MES"},
{ "data": "VALOR", className: "cssValores"},
{ "data": "METODO" },
{ "data": "ESTADO" },
{ "data": "OBS" }
]
} );
// This will load the child table with the corresponding data
parentTable.on( 'select', function () {
childTable.ajax.reload();
} );
//clear the child table
parentTable.on( 'deselect', function () {
childTable.ajax.reload();
} );
} );
The simplest way to adjust your existing code, is to change the logic in your dataSrc: function (data) {...}.
At the moment, you are only creating an array of one item.
So, instead you can do this:
dataSrc: function (data) {
var selected = parentTable.row( { selected: true } );
var rows = []; // create an empty array
if ( selected.any() ) {
var ID = selected.data().ID;
for (var i=0; i < data.data.length; i++) {
var row = data.data[i]; // change the variable name to "row"
if (row.ID === ID) {
rows.push(row); // add the new row to your array of rows
}
}
}
return rows; // return your array of rows
}
The most important line here is: rows.push(row); which is how JavaScript adds a new item to the end of an array.
So, now at the end of your dataSrc function you will either have an empty array [] if no rows were selected, or you will have an array of rows which match your ID.
That should solve your current problem.
The above approach should work - but it involves fetching every child row, every time - and then filtering out the ones you do not want to show.
You can probably improve on this by submitting the ID of the selected row as part of the child table's ajax URL. You can move the relevant code from its current location into your parentTable's on(select) function:
var selectedID = -1
parentTable.on( 'select', function () {
var selected = parentTable.row( { selected: true } );
if ( selected.any() ) {
selectedID = selected.data().ID;
}
childTable.ajax.reload();
} );
I do not know how you have implemented your ajax/query_pagquotas.php, so I am not sure of the best way to pass the selectedID parameter to it.
Normally I would append it as a query parameter in your ajax parameters:
data: 'id=' + selectedID
You may already know how to do this yourself.
Once you have passed the selectedID to your PHP, then you can use it to return only the records you want to display - and you can remove all of the existing dataSrc: function (data) {...} logic from your child table definition.
I want to get a value of 53.54.57 but somehow I always get the value of 53.53.53 not as expected. anyone can help me?
columns: [
{ data: 'linenum' },
{ data: 'nama' },
{ data: 'harga' },
{ data: 'qty' },
{ data: 'total' },
{ data: 'remove' },
{ data: 'untung' },
]
$("#table-main").DataTable().rows().every(function(){
var data = this.data();
var master_id = $("#" + $(data.remove).attr("id")).val();
//53,54,57 is index column name = "remove"
var master_barang_id;
master_barang_id = $("#" + $(data.remove).attr("id")).val(); //the method I use to retrieve data
alert(master_barang_id); //it should alert 53,54,57 BUT alerts only appear 53,53.53
});
$("#" + $(data.remove).attr("id")).val();
I use this function to retrieve data from the datatable, but the line can only be the same value. always a value of 53, how to get the value of a line in the column called 'remove'
Is my looping wrong? or is there another way to get that value?
Like #charlietfl said, it seems you're duplicating the element ids.
If I understood you correctly, and the id of your input(type number) is the value, then you only need to change one line:
$("#table-main").DataTable().rows().every(function(){
var data = this.data();
var master_id = $("#" + $(data.remove).attr("id")).val();
//53,54,57 is index column name = "remove"
var master_barang_id;
//change this line
//master_barang_id = $("#" + $(data.remove).attr("id")).val(); //the method I use to retrieve data
//for this one
master_barang_id = $("#" + data.remove).val();
alert(master_barang_id); //it should alert 53,54,57 BUT alerts only appear 53,53.53
});
This is a working example:
var jsonData = [{ "linenum": 1, "nama": "lampu economat 3w LED", "harga": 20000, "qty": 1, "total": 20000, "remove": 53, "untung": "X" }, { "linenum": 2, "nama": "lampu economat 5w LED", "harga": 25000, "qty": 1, "total": 25000, "remove": 54, "untung": "X" }, { "linenum": 3, "nama": "lampu economat 9w LED", "harga": 30000, "qty": 1, "total": 30000, "remove": 57, "untung": "X" }];
$("#btnGetData").click(function() {
$("#table-main").DataTable().rows().every(function(){
var data = this.data();
var master_id = $("#" + $(data.remove).attr("id")).val();
//53,54,57 is index column name = "remove"
var master_barang_id = $("#" + data.remove).val(); //the method I use to retrieve data
alert(master_barang_id); //it should alert 53,54,57 BUT alerts only appear 53,53.53
});
});
var oTable = $('#table-main').DataTable({
data: jsonData,
columns: [
{ data: 'linenum' },
{ data: 'nama' },
{
data: 'harga',
"render": function (data, type, row, meta) {
return '<input type="text" value=' + data + ' />';
}
},
{
data: 'qty',
"render": function (data, type, row, meta) {
return '<input type="number" value=' + data + ' />';
}
},
{ data: 'total' },
{
data: 'remove',
"render": function (data, type, row, meta) {
return '<input type="number" id="' + data + '" value=' + data + ' />';
}
},
{ data: 'untung' },
]
});
input {
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<div class="data-table-container">
<table id="table-main" class="table cell-border order-column stripe">
<thead>
<tr>
<th>linenum</th>
<th>nama</th>
<th>harga</th>
<th>qty</th>
<th>total</th>
<th>remove</th>
<th>untung</th>
</tr>
</thead>
</table>
</div>
<br>
<input type="button" id="btnGetData" value="GET DATA" />
I'm using one api in which the response is coming in two columns but in one column there are many parameters, I need to decode one column and want to show in different columns.
Column name coming from api timestamp, dataFrame, I need to show in 3 columns timestamp, oil temperature and winding temperature. I need to add one more column in datatable to show the values in the datatable.
sample json data
[{
"timestamp": "2018-07-21T07:56:23.838Z",
"dataFrame": "HA=="
},
{
"timestamp": "2018-07-21T08:16:23.902Z",
"dataFrame": "HA=="
}
]
output
Expected Output
Timestamp, Oil Temp, winding temp in 3 separate columns
code
<script>
window.onload = getddata();
function getddata() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var Readings = JSON.parse(xmlhttp.responseText);
//jquery data table - start
$(document).ready(function () {
$('#example').DataTable({
columnDefs: [{
"targets": 1,
"render": function (data, type, row, meta) {
var hexvalue =base64toHEX(data);
var deviceid= hexToDec(hexvalue.substr(1,1));
var oil_temp= hexToDec(hexvalue.substr(2,2));
var winding_temp= hexToDec(hexvalue.substr(4,2));
return 'oil temp: ' + oil_temp + ', Winding Temp: ' + winding_temp + ' ;
}
},
{
"targets": 0,
"render": function (data, type, row, meta) {
var updDate= UtcToIst(data).toLocaleDateString();
var updTime= UtcToIst(data).toLocaleTimeString();
var updDateTime=updDate + ", " + updTime;
return updDateTime ;
}
}
}
],
data: Readings,
columns: [{
"data": "timestamp"
}, {
"data": "dataFrame"
}
]
});
});
//data table code -close
}
};
xmlhttp.open("GET", "https://.., true);
xmlhttp.setRequestHeader("Authorization", "Basic a2VybmV");
xmlhttp.setRequestHeader("Content-type", "Application/json");
xmlhttp.send();
}
</script>
It seems to me the code is a little bit overcomplicated. Why not just reuse dataFrame over multiple columns? Perhaps I misunderstand the question ...
var table = $('#example').DataTable({
data: sampleReadings,
columns: [
{ data: 'timestamp', title: 'timestamp',
render: function(data) {
return data
/* dont know what UtcToIst is
var updDate= UtcToIst(data).toLocaleDateString();
var updTime= UtcToIst(data).toLocaleTimeString();
var updDateTime=updDate + ", " + updTime;
return updDateTime ;
*/
}
},
{ data: 'dataFrame', title: 'deviceid',
render: function(data) {
var hexvalue = base64toHEX(data);
return hexToDec(hexvalue.substr(1,1));
}
},
{ data: 'dataFrame', title: 'Oil temp',
render: function(data) {
var hexvalue = base64toHEX(data);
return hexToDec(hexvalue.substr(2,2));
}
},
{ data: 'dataFrame', title: 'Winding temp',
render: function(data) {
var hexvalue = base64toHEX(data);
return hexToDec(hexvalue.substr(4,2));
}
},
//I guess there is more data hidden in dataFrame
//You can almost copy paste new columns here
]
})
If you have 10.000 records it would be a good idea to cache the output from base64toHEX.
demo -> http://jsfiddle.net/fn0yL361/
You can simply add a new column and render related value. Please update the data tables column.
https://datatables.net/reference/option/columns.name
{ columnDefs: [{
"targets": 2,
"name": "winding temp",
"render": function (data, type, row, meta) {
var hexvalue =base64toHEX(data);
var deviceid= hexToDec(hexvalue.substr(1,1));
var oil_temp= hexToDec(hexvalue.substr(2,2));
var winding_temp= hexToDec(hexvalue.substr(4,2));
return 'Winding Temp: ' + winding_temp ;
}
},{
"targets": 1,
"name": "Oil temp",
"render": function (data, type, row, meta) {
var hexvalue =base64toHEX(data);
var deviceid= hexToDec(hexvalue.substr(1,1));
var oil_temp= hexToDec(hexvalue.substr(2,2));
var winding_temp= hexToDec(hexvalue.substr(4,2));
return 'oil temp: ' + oil_temp ;
}
},
{
"targets": 0,
"name" : "Timestamp",
"render": function (data, type, row, meta) {
var updDate= UtcToIst(data).toLocaleDateString();
var updTime= UtcToIst(data).toLocaleTimeString();
var updDateTime=updDate + ", " + updTime;
return updDateTime ;
}
}
],
data: Readings,
columns: [{
"data": "timestamp"
}, {
"data": "dataFrame"
},
{
"data": "dataFrame"
}
]
Here is an example, because there are spaces in Name so need some extra code to get field:
var str = "{timestamp: 'xxx', dataFrame: 'Old Time: xx, winding Time: yyyy, Ambient Time: zzzz'}";
var objOrg = JSON.parse(str);
var newJSon = [{}];
foreach (var itm in objOrg)
{
var new3Fields = itm.dataFrame;
var arr = new3Fields.split(',')
var newItem = {};
newItem.timestamp = itm.timestamp;
newItem.OldTime = JSON.parse(arr[0]).['Old Time'];
newItem.WindingTime = JSON.parse(arr[1]).['winding Time'];
newItem.AmbientTime = JSON.parse(arr[2]).['Ambient Time'];
newJSon += newItem;
}
newJSon <--- This is a list with 4 columns
I am trying display data in jQuery datatable but, I am seeing unexpected vertical scrollbar.
Fiddler: https://jsfiddle.net/8f63kmeo/15/
HTML:
<table id="CustomFilterOnTop" class="table table-bordered table-condensed" width="100%"></table>
JS
var Report4Component = (function () {
function Report4Component() {
//contorls
this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
//data table object
this.customFilterOnTopGrid = null;
//variables
this.result = null;
}
Report4Component.prototype.ShowGrid = function () {
var instance = this;
//create the datatable object
instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
columns: [
{ title: "<input name='SelectOrDeselect' value='1' id='ChkBoxSelectAllOrDeselect' type='checkbox'/>" },
{ data: "Description", title: "Desc" },
{ data: "Status", title: "Status" },
{ data: "Count", title: "Count" }
],
"paging": true,
scrollCollapse: true,
"scrollX": true,
scrollY: "50vh",
deferRender: true,
scroller: true,
dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>',
buttons: [
{
text: 'Load All',
action: function (e, dt, node, config) {
instance.ShowData(10000);
}
}
],
columnDefs: [{
orderable: false,
className: 'select-checkbox text-center',
targets: 0,
render: function (data, type, row) {
return '';
}
}],
select: {
style: 'multi',
selector: 'td:first-child',
className: 'selected-row selected'
}
});
};
Report4Component.prototype.ShowData = function (limit) {
if (limit === void 0) { limit = 2; }
var instance = this;
instance.customFilterOnTopGrid.clear(); //latest api function
instance.result = instance.GetData(limit);
instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
instance.customFilterOnTopGrid.draw();
};
Report4Component.prototype.GetData = function (limit) {
//structure of the response from controller method
var resultObj = {};
resultObj.Total = 0;
resultObj.RecordList = [];
for (var i = 1; i <= limit; i++) {
resultObj.Total += i;
var record = {};
record.Description = "Some test data will be displayed here.This is a test description of record " + i;
record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
record.Count = i;
resultObj.RecordList.push(record);
}
return resultObj;
};
return Report4Component;
}());
$(function () {
var report4Component = new Report4Component();
report4Component.ShowGrid();
report4Component.ShowData();
});
function StopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
ISSUE:
I am wondering why the vertical scrollbar is appearing and why I am seeing an incorrect count...? Is it because my datatable has rows with multiple lines? As I have already set the scrolly to 50vh, I am expecting all the rows to be displayed.
Note:
The table should support large data too. I have enabled scroller for that purpose as it is required as per the application design. To verify that click on "Load all" button.
Any suggestion / help will be greatly appreciated?
You just need to remove property " scroller: true" it will solve your problem.
For demo please check https://jsfiddle.net/dipakthoke07/8f63kmeo/20/
I am trying to use Datatables plug-in to display data for a report.
I like to add 2 footer rows to my table, the first one for a subtotal "totals from the current page" and another row for Granttotal "Totals from all the pages"
I followed this example in the docs to attempt to add the rows, but for some reason the footer is not showing up.
I populate the datatable on the fly using Ajax Request after the DataTable is initilized. Below is my current code.
Here is my Html markup
<table id="reportTable" class="table table-striped " cellspacing="0" style="width: 100%;">
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
Here is my JavaScript code
$(function(e) {
$(window).load(function (e) {
$('#reportTable').DataTable({
pageLength: 50,
lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
order: [ [ 2, 'desc' ] ],
columns: [
{ data: 'chain_name', title: 'Chain Name', width: '20%'},
{ data: 'store_id' , title: 'Store Number' },
{ data: 'completed', title: 'Total Completed' },
{ data: 'initial_quota', title: 'Target To Complete' },
{ data: 'total_callable', title: 'Total In Queue' },
{ data: 'current_status', title: 'Current Status' },
{ data: 'wgtstamp', title: 'Weight' }
]
,
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
var completedSubTotal = api
.column(2)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total over this page
var completedGrandTotal = api
.column(2, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer with a subtotal
$(api.column(2).footer()).html(completedSubTotal);
// Update footer with a grand total
$(api.column(2).footer()).html(completedGrandTotal);
}
});
});
$('input:search').on('keyup', function () {
$('#reportTable').DataTable().search(this.value).draw();
});
$('#CampaignMenu').change(function(e) {
$('#reportTable').DataTable().clear().draw();
var campId = $(this).val();
if (campId != '0') {
$.ajax({
type: 'POST',
url: '#Url.RouteUrl("AccountQuotaDashboard.GetReportData")',
data: { 'campaign_id': campId },
dataType: 'json',
success: function (json) {
if (json && !$.isEmptyObject(json)) {
var table = $('#reportTable').dataTable().fnAddData(json);
}
}
});
}
});
});
How can I correctly add 2 footer row to my data table?
UPDATED
I created a filddle to show you the code in action http://live.datatables.net/yubuyewi/2 . As you can see everything is working except for the total rows
You need to change the tfoot section of your table and add a tr and th Inorder to get the sub total and grand total like this.
<tfoot><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>
Also you have swapped the sub total and grand total calculation.
In grand total calculation, you have used page: current which should be used in sub total calculation.
Corrected the script and the new fiddle is here