We Keep Coding

Change the message in bar with no results after initcomplete

I'm using Datables and I need to set a message when the Datatable is being created. Also when it finishes I need it to change. I've got this so far. Any idea how I can make it work?
var dataTable = $('#example').DataTable({
"processing": true,
"serverSide": false,
"stateSave": true,
"aaSorting": [],
"deferRender": true,
"ajax": {
url: Link,
data: {
OpenDocs: '1'
},
type: "post"
},
language: {
"zeroRecords": " "
},
"initComplete": function(settings, json) {
language: {
"zeroRecords": " No data here. "
},
}
});

Just add this attribute it will work:
oLanguage: {
"sProcessing" : "Custom message while processing",
"sEmptyTable" : "My Custom Message On Empty Table"
}

DataTables TableTools export buttons not working

Using the code below, I can get the TableTools buttons to show up on the page, style correctly, and even change the mouse icon on the mouseover event, however the export function is not working. When I click on the button, nothing happens. Don't even get an error message.
The DataTable the TableTools plugin is working on does not exist on the page prior to the user hitting a "Search" button. Once this is done an Ajax call will pull the relevant data and create the DataTable. Again, this part of the program works fine, however when I click on the "Export" buttons (CSV, Excel, PDF)... nothing happens.
jQuery
$.ajax({
type: 'GET',
url: '#Url.Action("PensgcReport", "Home")',
data: { inputArray: inputArray },
traditional: true,
success: function (data) {
//Unpack return object into 2D array
var array = [];
$.each(data, function (key, value) {
var tempArray = [];
$.each(value, function(key, value) {
tempArray.push(value);
});
array.push(tempArray);
});
console.log(array);
$('#ReportTable').dataTable({
"bDestroy" : true,
"aaData": array,
"aoColumns": headers,
"bFilter": false,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aaSorting": [],
"oLanguage": {
"sSearch": "Filter results:"
},
"sDom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "Content/media/copy_csv_xls_pdf.swf",
"aButtons":
[
{
'sExtends': 'csv',
"sFileName": "PENSGC_Report_" + new Date() + ".csv",
'mColumns': [0, 1]
},
{
'sExtends': 'xls',
"sFileName": "PENSGC_Report_" + new Date() + ".xls",
'mColumns': [0, 1]
},
{
'sExtends': 'pdf',
"sFileName": "PENSGC_Report_" + new Date() + ".pdf",
'mColumns': [0, 1]
},
]
}
});
}
})
HTML
This is the rendered HTML when the page loads (nothing special)
<table id="ReportTable" class="pretty">
</table>
Folder Structure

Change the swf path to:
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"

var table = $('#mytable').dataTable({ YOUR OPTIONS});
var tableTools = new $.fn.dataTable.TableTools(table, {
"buttons": ["copy",
"csv",
"xls",
"pdf",{ "type": "print", "buttonText": "Print me!" } ],
"sSwfPath": "//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf" });
$(tableTools.fnContainer()).prependTo('#mytable_wrapper');

How to remove the next/previous tabs after the jQuery dataTable initialized from jSON?

A jQuery table is initialized from jSON
I know that it will be only one row, so I do not need to show the next/previous tabs after the table. Nevertheless they are displayed.
Is there any way of removing them?
The code for the table:
table = $("#retrievedTable").dataTable({
"bServerSide" : true,
"sAjaxSource" : "/cm/credit/getretrievedTable.json",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "orderNumber", "value": $( "#orderNumberInput" ).val() } );
},
"bProcessing" : true,
"bInfo" : false,
"bRetrieve" : true,
"bDestroy" : true,
"bAutoWidth": false,
"bLengthChange": false,
"iDisplayLength": 20,
"aoColumnDefs": [{
"mRender": function ( data, type, row ) {
return moment(data).format("MM/DD/YYYY");
},
"aTargets": [ 0 ],
"bPaginate": false
}]
});

The only answer I can come up with is to hide it instead of removing it. You can do this by adding this to your css:
.dataTables_paginate {
display: none;
}
I've tried it with the example on the website. The css class was found on this page.

Bind dynamically created JSON object to JQUERY data table

How to bind dynamic JSON object to jquery data table. Did anyone worked on such scenario.
For example,
var objTable = jQuery.parseJSON(result);
if objTable != null && objTable .length > 0) {
$('#tblName').dataTable({
"bDestroy": true,
"bScrollCollapse": true,
"bJQueryUI": true,
"bPaginate": false,
"sScrollY": "310px",
"bInfo": true,
"bFilter": true,
"bSort": true,
"aaData": objTable,
"aoColumns": [
{ "mData": "Field1" },
{ "mData": "Field2" },
{ "mData": "Field3" },
.
.
.
.
{ "mData": "FieldN" }] //These are dynamically created columns present in JSON object.
});
}

Its possible to add the data to datatable dynammically
Like this
$('#YourTableID').dataTable().fnAddData([sno,msg.json[i].unit_id,msg.jsoni].date_time,msg.json[i].sms_number,msg.json[i].message]);
Befor that you have 5 headers in table for appending above

javascript Datatable.js how to show value based on previous column

I am using datatables.js from datatables.net and trying to show a column based on prev col. Like if prev col has got value < 0 then Dr else CR.
I have tried the following script:
$(document).ready(function() {
var oTable = $('#transaction-list-results').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"sAjaxSource": "ajax/transactions.php",
"aaSorting": [[0, 'asc']],
"bAutoWidth": false,
"aoColumns": [
{ "mData": "ref_no", 'sWidth': '100px' },
{ "mData": "date", 'sWidth': '100px', "mRender": function(data, type, row){return localizeDateStr(data);}},
{ "mData": "desc", 'sWidth': '300px' },
{ "mData": "amount", 'sWidth': '75px', "sCalss": 'amount' },
{ "mData": "depo", 'sWidth': '75px', "mRender": function(data, type, row){return data;}},
{ "mData": "width", 'sWidth': '75px', "mRender": function(data, type, row){return data;}},
{ "mData": "transfer", 'sWidth': '75px', "mRender": function(data, type, row){return data;}}
]
} );
} );
Result of my transaction.php file:
{"aaData":[{"ref_no":"4345643532","date":"2012-10-09T17:36:28Z","desc":"Western Union","amount":-50,"depo":"","width":"","transfer":""},{"ref_no":"4324","date":"2012-10-09T17:28:06Z","desc":"123","amount":-10,"depo":"","width":"","transfer":""},{"ref_no":"4324","date":"2012-10-09T17:27:48Z","desc":"123","amount":3.45,"depo":"","width":"","transfer":""},{"ref_no":"123","date":"2012-10-05T20:56:11Z","desc":"abc","amount":10,"depo":"","width":"","transfer":""},{"ref_no":"12","date":"2012-10-01T16:47:19Z","desc":"autorefill","amount":2000,"depo":"","width":"","transfer":""}]}

So, you actually are already using some functions here that should help.
mRender will allow you render the data displayed in a particular column, defined in your aoColumns definition. You correctly have the three arguments labeled for the function:
data (the data for the cell, based on the mData key)
type
row (the dataset for the entire row)
So you can do something like this:
...
"mRender": function(data, type, row) {
var valueToCompare = row.someOtherCell
returnValue = data;
if (data > valueToCompare) { // or some similar logic
returnValue = somethingElse;
}
return returnValue;
}
...
Also, as a side note - you use mRender several times just to return data. That's not necessary if you're not manipulating the value - this is implicitly done through simply setting the mData property.