We Keep Coding

unable to display sum in footer using datatable

I have created a datatable using jQuery. The table has seven columns , among one column is for Grand Total (column 6). I have to display the sum of Grand Total (column 6) in the Grand Total (column 6) at the bottom of Grand Total (column 6).
How can I do that? I have tried some code but nothing worked.
Outout is blank column.
here is the code that I found.
below is the html code
HTML
<table class="display table table-bordered table-striped" id="dynamic-table">
<thead>
<tr>
<th>Invoice Type</th>
<th>Invoice No</th>
<th>Invoice Date</th>
<th>Customer Name</th>
<th>City </th>
<th>Grand Total</th>
<th class="hidden-phone">Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Total:</th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
JavaScript
function load_datatable() {
var data = $('input[name=report]:Checked').val();
var date = $('#rep_date').val();
var type = $('#type_id').val();
datatable = $("#dynamic-table").dataTable({
"bAutoWidth": false,
"bFilter": true,
"bSort": true,
"bProcessing": true,
"bDestroy": true,
"bServerSide": true,
"oLanguage": {
"sLengthMenu": "_MENU_",
"sProcessing": "<img src='" + root_domain + "img/loading.gif'/> Loading ...",
"sEmptyTable": "NO DATA ADDED YET !",
},
"aLengthMenu": [
[10, 20, 30, 50],
[10, 20, 30, 50]
],
"iDisplayLength": 10,
"sAjaxSource": root_domain + 'app/invoice/',
"fnServerParams": function(aoData) {
aoData.push({
"name": "mode",
"value": "fetch"
}, {
"name": "report",
"value": data
}, {
"name": "type_id",
"value": type
}, {
"name": "date",
"value": date
});
},
"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 this page
pageTotal = api
.column(5, {
page: 'current'
})
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
console.log(pageTotal);
// Update footer
$(api.column(5).footer()).html('$' + pageTotal);
},
"fnDrawCallback": function(oSettings) {
$('.ttip, [data-toggle="tooltip"]').tooltip();
}
}).fnSetFilteringDelay();
//Search input style
$('.dataTables_filter input').addClass('form-control').attr('placeholder', 'Search');
$('.dataTables_length select').addClass('form-control');
}

do this example :
const Table = $('#foo').DataTable({
. . . . . .,
. . . . . .,
drawCallback: function(){
Table.columns(5, {
page: 'current'
}).every(function() {
var sum = this
.data()
.reduce(function(a, b) {
var x = parseFloat(a) || 0;
var y = parseFloat(b) || 0;
return x + y;
}, 0);
console.log(sum);
$(this.footer()).html(sum);
});
}
});
in this case the column was column number 5

aoColumns of datatables are not working

Please find attached the application picture, where the column ORDER ID is not showing, and instead of that, is showing the PLUS sign. So all the columns should shift for one to the right.
ajax
And all the time when I run the application it shows me this error message:
DataTables warning (table id = 'companies'): Added data (size 3) does not match known number of columns (4)
var oTable;
$('#companies tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
/* This row is already open - close it */
this.src = "/Content/images/details_open.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
this.src = "/Content/images/details_close.png";
var orderid = $(this).attr("rel");
$.get("Me?OrderID=" + orderid, function (detalet) {
oTable.fnOpen(nTr, detalet, 'details');
});
}
});
/* Initialize table and make first column non-sortable*/
oTable = $('#companies').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'AjaxHandler',
"bJQueryUI": true,
"aoColumns":
[
{ "bSortable": false,
"bSearchable": false,
"fnRender": function (oObj)
{
return '<img src="/Content/images/details_open.png" alt="expand/collapse" rel="' + oObj.aData[0] + '" />';
}
},
null,
null,
null
]
});
<table id="companies" class="display">
<thead>
<tr>
<th> </th>
<th>Order ID</th>
<th>Customer ID</th>
<th>Ship Address</th>
</tr>
</thead>
<tbody></tbody>
</table>

You should specify the column number in the aoColumns definition, e.g.:
"aoColumnDefs":[
{
"mData": null,
"bSortable": false,
"bSearchable": false,
"fnRender": function (oObj) {
return '<img src="/Content/images/details_open.png" alt="expand/collapse" rel="' + oObj.aData[0] + '" />';
}
},
{ "mData": 0 },
{ "mData": 1 },
{ "mData": 2 },
{ "mData": 3 }
]
And the HTML markup:
<table id="companies" class="display">
<thead>
<tr>
<th></th>
<th>Order ID</th>
<th>Customer ID</th>
<th>Ship Address</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
</table>

Use the following structure for aoColumns:
"aoColumns": [
{
"mData": 0,
"bSortable": false,
"bSearchable": false,
"mRender": function (data, type, full){
return '<img src="/Content/images/details_open.png" alt="expand/collapse" rel="' + data + '" />';
}
},
{ "mData": 1 },
{ "mData": 2 },
{ "mData": 3 }
]
Use the following HTML markup:
<table id="companies" class="display">
<thead>
<tr>
<th>Order ID</th>
<th>Customer ID</th>
<th>Ship Address</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
</table>

Why my dataTables in bootstrap don't see the data included?

I want to create a dynamic table in bootstrap/jquery, similar to this one
In this example the data is hardcoded, so I thought about changing it with the data that comes from json. Additionally, each row in table has to have a hyperlink added, so my jquery code is as follows:
$('#dataTables-example').DataTable({
responsive: true
});
var data = '[{"number":"1","id":"2","price":"100.70","date":"2015-10-18 03:00:00","hidden":"21"},
{"number":"2","id":"2","price":"88.20","date":"2015-10-18 04:00:00","hidden":"22"}]';
json = JSON.parse(data);
$.each(json, function(i, v) {
$('<tr/>', {
html: [$('<td/>', {
text: v.number
}), $('<td/>', {
text: v.id
}), $('<td/>', {
text: v.price
}), $('<td/>', {
text: v.date
}), $('<td/>', {
html: [
$('<a/>', {
href: '#',
class: 'show-details',
text: 'show details',
data: { id: v.hidden },
click: function() {
var id = $(this).data('id');
console.log(id);
alert(id);
}
})
]
})]
}).appendTo('#dataTables-example tbody')
})
In my html I hardcoded the header of the table:
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>number</th>
<th>id</th>
<th>price</th>
<th>date</th>
<th>show details</th>
<th style="display:none;">hidden identifier</th>
</tr>
</thead>
<tbody></tbody>
</table>
and later on thanks to my script I'm appending rows to the table. Simple as that.
However, as you can see in my fiddle:
http://jsfiddle.net/uo8rc5qL/6/
there is a problem, because since the data is not hardcoded, the table thinks there are no rows and displays the specific message there No data available in table. Also, when I click any column name to sort that data - content disappears, since the table thinks there's nothing to display after sorting...
How can I fix this situation?

This is because you're just adding the data to the table, not the underlying datatable source. The solution is to let datatables handle the loading of the data:
$('#dataTables-example').DataTable({
responsive: true,
"data": JSON.parse(datasrc),
"columns": [
{ data: 'number' },
{data: 'id'},
{data: 'price' },
{ data: "date" },
{
"data": "null",
"defaultContent": "<a>click</a>"
},
{ data: "hidden" }
]
});
Working example: JSFIDDLE

Always go through the API! Insert new rows using table.row.add([..]) instead of the jQuery $('<tr>', {... approach :
$.each(json, function(i, v) {
var row = table.row.add([v.number, v.id, v.price, v.date, '<a>show details</a>']);
table.cells({ row: row.index(), column: 4 }).nodes().to$().find('a')
.attr('href', '#')
.addClass('show-details')
.css('cursor', 'pointer')
.data('id', v.hidden)
.on('click', function() {
var id = $(this).data('id');
console.log(id);
alert(id);
})
table.draw();
})
forked fiddle -> http://jsfiddle.net/2wujw71x/1

How to disable sorting on specific column while searching is functional

I am using DataTable (http://www.datatables.net) in order to get desired functionality including sorting columns and searching within columns from Table Heading individually. Initializing is as follow which returns api and searching functionality is achieved.
$('#table2').DataTable()
Now Problem is when I have to disable sorting on checkbox and I have to use following line of code.
$('#table2').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
] } );
it does apply sorting disabled on column but search functionality within column also doesn't work. Is there any way I can pass any parameter in DataTable({something}) in order to disable sorting on first column or please help me to combine (api & jquery object) method in order to achieve desired functionality.
$('#table2').DataTable();
$('#table2').dataTable();
<table class="table table-striped draggable sortable dataTable" id="table2">
<thead>
<tr>
<th class="text-center"> <input class="check_box_all no-sort" id="check_all" type="checkbox" title="Check All"></th>
<th class="text-center">Company Name </th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td class="text-center"><input type="checkbox" class="check_box"></td>
<td class="text-center">Med Assets Company</td>
</tr>
</tbody>
This snippet makes input field in table heading for searching purpose
$('#table2 thead th').slice(3).each(function () {
var title = $('#table2 thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="' + title + '" />');
});
Data Table Initialize
var table = $('#table2').DataTable({
"dom": 'C<"clear">lfrtip',
"sPaginationType": "full_numbers",});
Applying the search
var tableResult = table.columns().eq(0);
if (tableResult !== null) {
tableResult.each(function (colIdx) {
$('input', table.column(colIdx).header()).on('keyup change', function () {
table
.column(colIdx)
.sort()
.search(this.value)
.draw();
});
});
}
Please check jsfiddle when check box is checked it totally mess up
https://jsfiddle.net/sxgd0thm/

$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": true, "aTargets": [ 0,1,2,3,4,5 ] }
] } );
Try with "bSearchable" with allowable column search

$('#table2').dataTable({
"dom": 'C<"clear">lfrtip',
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [ 0 ] },
{"bSortable": false, "aTargets": [ 1 ]}
]});
Can you try with this

how to get the inner html value from Datatable cell

I am newbie to DataTable. here I am trying to get the of first cell value of a row when I click the viewlink associated with the row, instead of the value I am getting [object object].
heres my code
$(document).ready(function() {
// Delete a record
$('#example').on('click', 'a.editor_view', function (e) {
e.preventDefault();
var rowIndex = oTable.fnGetPosition( $(this).closest('tr')[0] );
aData = oTable.fnGetData($(this).parents('tr')[0]);
alert(aData);
} );
// DataTables init
var oTable=$('#example').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": "php/browsers.php",
"aoColumns": [
{ "mData": "browser" },
{ "mData": "engine" },
{ "mData": "platform" },
{ "mData": "grade", "sClass": "center" },
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'view / Delete'
}
]
} );
} );
HTML Table:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th width="30%">Browser</th>
<th width="20%">Rendering engine</th>
<th width="20%">Platform(s)</th>
<th width="14%">CSS grade</th>
<th width="16%">Admin</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Browser</th>
<th>Rendering engine</th>
<th>Platform(s)</th>
<th>CSS grade</th>
<th>Admin</th>
</tr>
</tfoot>
Now when I Click on the view I need to Navigate to another page with the id like
view.php?id=125
Thank you

$('#example').on('click', 'a.editor_view', function (e) {
e.preventDefault();
var rowIndex = oTable.fnGetPosition( $(this).closest('tr')[0] );
aData = oTable.fnGetData(rowIndex,0);
alert(aData);
} );
From the api docs:
fnGetData
Input parameters:
{int|node}: A TR row node, TD/TH cell node or an integer. If given as a TR node then the data source for the whole row will be returned. If given as a TD/TH cell node then iCol will be automatically calculated and the data for the cell returned. If given as an integer, then this is treated as the aoData internal data index for the row (see fnGetPosition) and the data for that row used.
{int}: Optional column index that you want the data of.

Assuming your first row is your id, would you want to include the links in your dataTable initializer like this?
$(document).ready(function () {
var oTable = $('#example').dataTable({
"aoColumnDefs": [{
"fnRender": function (oObj) {
var id = oObj.aData[0];
var links = [
'View',
'Delete'];
return links.join(' / ');
},
"sClass": "center",
"aTargets": [4]
}, {
"sClass": "center",
"aTargets": [3]
}]
});
});
see: http://jsfiddle.net/9De6w/