We Keep Coding

How can I set a footer property in JSON export of DataTable?

There is a footer property in datatable which export the footer data
{
extend: 'csv',
footer: true,
exportOptions: {
columns: ':visible'
}
},
footer : true, property allows to export footer data to csv file.
How can I set this same property in below code
{
text: 'JSON',
action: function ( e, dt, button, config ) {
var data = dt.buttons.exportData();
$.fn.dataTable.fileSave(
new Blob( [ JSON.stringify( data ) ] ),
'Export.json'
);
}
}
Is this possible ? Please help me any solution. Thanks in advance.

Data Table with AJAX, sum and add total footer

I have a datatable created by the following code
var data = results.rows;
var column_names = results.headers;
if (column_names) {
var columns = [];
var total = 0;
for (var i = 0; i < column_names.length; i++) {
columns[i] = {
'title': column_names[i],
'data': i
}
};
dataTable=$('#report').DataTable( {
columns: columns,
data: data,
paging: false,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
}
);
showTable();
dataTable.columns.adjust().draw();
} else {
alert('No Results Found');
}
I would like to add a footer to the table that contains a sum of the 2nd column and has text that says "Total: "
The table in the html looks like:
<table id="report" class="compact">
</table>
I tried adding a footer in html but it was overwritten when the report is rerun so this needs to be done in the top section of code in order to display every time a table is created.
Thanks in advance:)

I found an example here http://jsbin.com/putiyep/edit?js.
It wont look as pretty as you hoped for but it'll do the job.
It leverages the footerCallback of the API and use the column index of the table and basic math to return your total.
The data table section of the code would look like:
dataTable=$('#report').DataTable( {
columns: columns,
data: data,
paging: false,
dom: 'Bfrtip',
"footerCallback": function (tfoot, data, start, end, display) {
var api = this.api();
var p = api.column(2).data().reduce(function (a, b) {
return a + b;
}, 0)
$(api.column(2).footer()).html("Total: "+p);
},
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
}
);

How to make a specific search field uppercase?

I'm using an 'Individual column searching' as specified in DataTables' documentation.
What I want to accomplished is to make the second search field (located below the column) value UPPERCASE as the user types a date.
Here's my .js file:
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable({
/*More Code*/
columnDefs: [
{ targets: 0, visible: false },
{ targets: 1, render: $.fn.dataTable.render.moment( 'D-MMM-YY' ) }
],
columns: [
{ /* DATA */},
{ data: "logEntryTime" },
{ /* DATA */},
{ /* DATA */},
{ /* DATA */},
{ /* DATA */},
]
/*More Code*/
});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
Any ideas?

One simple way to do this is to use css.
text-transform: uppercase;
However, that only changes the appearance of the text. If you need to change the value of the text, then you would use some JS.
input.value.toUpperCase()

DataTables-1.10.9 & jQuery.dataTables Uncaught TypeError:

using DataTables, I can see this error in the console, even if my table is correctly displayed ... I guess it's not so important but could it have any collateral effect late ?
the error in the console is :
## assets => DataTable-1.10.9/js/jQuery.dataTables.js
Uncaught TypeError: Cannot read property 'replace' of null
and the faulty line is : var sTitle = col.sTitle.replace( /<.*?>/g, "" )
#### DataTable-1.10.9/js/jQuery.dataTables.js
function _fnSortAria ( settings )
{
var label;
var nextSort;
var columns = settings.aoColumns;
.../...
// ARIA attributes - need to loop all columns, to update all (removing old
// attributes as needed)
for ( var i=0, iLen=columns.length ; i<iLen ; i++ )
{
var col = columns[i];
var asSorting = col.asSorting;
var sTitle = col.sTitle.replace( /<.*?>/g, "" );
var th = col.nTh;
../...
Checking it, col.sTitle is null... no default settings
The DataTables.net documentation ( https://datatables.net/reference/option/columns.title ) indicates 2 ways of setting the column titles : I am using the columns() way, and all my titles are correctly displayed ... It doesn't indicates WHEN we should use one way or the other way ...
$('#example').dataTable( {
"columnDefs": [
{ "title": "My column title", "targets": 0 }
]
} );
$('#example').dataTable( {
"columns": [
{ "title": "My column title" },
null,
null,
null,
null
]
} );
I "guess" it's related to the fact I am using the DataTable API rather than the jQuery dataTable selector ...
# here is my table initialisation
// Let datatables render it now - accessing API
var table = $('#sheet').DataTable({
dom: "<'row'<'col-xs-6'><'col-xs-6'f>r>t<'row'<'col-xs-6'l><'col-xs-6'p>>",
language: { url: langUrl },
ordering: true,
searching: true,
paging: true,
info: false,
select: true,
data: sheet.data,
columns: column_titles
columnDefs: [{"targets": [ 0 ],"visible": false}]
});

How to get current rendered element in datatables

I need to change rendering of cell based on the element position, without changing data,
In docs I found mData and mRender options, I tried with fnRender (which is depricated), but it gives me position, but changes data in table while rendering, so I wonder if here is any way to get the cell position when it renders, or I should to rerender table myself after each change ?
the following code illustrate my needs:
$(document).ready( function() {
var oTable = $('#example').dataTable( {
"aoColumnDefs": [ {
"aTargets": ['_all'],
"mRender": function ( data, type, full )
{
if (type!='display') return data;
//HOW to get current cell indexes or DOM element here ?
console.log(this,data,type,full);
return data+' ttt';
}
} ]
} );
$('#example > tbody > tr').on('click','td',function() {
console.log(this);
var pos=oTable.fnGetPosition(this);
var value=oTable.fnGetData(this);
oTable.fnUpdate(value.split("").reverse().join(""),pos[0],pos[2]);
});
var button=$('<button>').text('clickme');
button.click(function() { console.log(oTable.fnGetData());});
$('body').append(button);
});
http://live.datatables.net/enirid/3/edit
the sample using fnRender:
$(document).ready( function() {
var oTable = $('#example').dataTable( {
"aoColumnDefs": [ {
"aTargets": ['_all'],
"fnRender": function ( obj, data )
{
console.log(obj,data);
var col=obj.iDataColumn;
//HOW to change display here without changing data of table
return data+' '+col;
}
} ]
} );
$('#example > tbody > tr').on('click','td',function() {
console.log(this);
var pos=oTable.fnGetPosition(this);
var value=oTable.fnGetData(this);
oTable.fnUpdate(value.split("").reverse().join(""),pos[0],pos[2]);
});
var button=$('<button>').text('clickme');
button.click(function() { console.log(oTable.fnGetData());});
$('body').append(button);
});
http://live.datatables.net/opubaj/edit

Try fnCreatedCell.
Attached the example code snippet provided from datatables.net:
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [ {
"aTargets": [3],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if ( sData == "1.7" ) {
$(nTd).css('color', 'blue')
}
}
} ]
});
} );