We Keep Coding

TableTool is not working in jquery datatable(Not showing buttons)

I am using jquery datatable and all my code is working fine. Then I added tooltable attribute the datatable defination with all required js,css and swf files. My code is :
table = $(".jqueryDataTable").dataTable( {
"fnInitComplete": function(oSettings, json) {
alert( 'DataTables has finished its initialisation in table.' );
this.fnHideEmptyColumns(this);
$('#lblReportHeader').html(reportHeader);
$('#lblFromDate').html(fromDateHeader);
$('#lblToDate').html(fromToHeader);
$('#tblReportHeader').show();
},
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "resources/swf/copy_csv_xls_pdf.swf"
},
"bServerSide": true,
"bFilter": false,
"bRetrieve": true,
"bDestroy": true,
"sAjaxSource": "./getReportDetails",
"bJQueryUI": true,
"fnServerParams": function ( aoData ) {
newData=aoData;
newData.push( { "name": "reportType", "value": reportType }, { "name": "reportSubType", "value": reportSubType}, { "name": "fromDate", "value": fromDate}, { "name": "toDate", "value": toDate});
},
"aoColumns": [
{ "mData": "username", "sTitle": "username"},
{ "mData": "transferType", "sTitle": "transferType"},
{ "mData": "fromAccount", "sTitle": "fromAccount"},
{ "mData": "toAccount", "sTitle": "toAccount"},
{ "mData": "amount", "sTitle": "amount"},
{ "mData": "currency", "sTitle": "currency"},
{ "mData": "transferDate", "sTitle": "transferDate"},
{ "mData": "creditDebitFlag", "sTitle": "creditDebitFlag"},
{ "mData": "fromAccountType", "sTitle": "fromAccountType"},
{ "mData": "toAccountType", "sTitle": "toAccountType"},
{ "mData": "impsChannelType", "sTitle": "impsChannelType"},
{ "mData": "impsTranType", "sTitle": "impsTranType"},
{ "mData": "IFSCCode", "sTitle": "IFSCCode"},
{ "mData": "narration", "sTitle": "narration"},
{ "mData": "customerID", "sTitle": "customerID"},
{ "mData": "customerName", "sTitle": "customerName"},
{ "mData": "fromMMID", "sTitle": "fromMMID"},
{ "mData": "fromMobileNo", "sTitle": "fromMobileNo"},
{ "mData": "toMMID", "sTitle": "toMMID"},
{ "mData": "toMobileNo", "sTitle": "toMobileNo"},
{ "mData": "paymentType", "sTitle": "paymentType"},
{ "mData": "transReferenceId", "sTitle": "transReferenceId"},
{ "mData": "transactionStatus", "sTitle": "transactionStatus"}
]
} );
But it is not showing any button for excel,pdf etc.
My resources are :
<link rel="stylesheet" href="resources/css/dataTables.tableTools.css">
<script src="resources/js/jquery-2.1.1.min.js"></script>
<script src="resources/js/jquery.dataTables.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/BootSideMenu.js"></script>
<script src="resources/js/TableTools.js"></script>
and I have swf file at "resources/swf/copy_csv_xls_pdf.swf" but I am not able to see any button on my UI.
What is the wrong in my code ?

Select/highlight entire row on checkbox click

I want to select entire row of the datatable. With the following code only the 0th(NAME) column from the data is being selected:
I do the following inside a success ajax function
mydtable.DataTable( {
aaData:result.users,
"aaSorting": [[1,'asc']],
"iDisplayLength": 25,
"bPaginate": true,
"sPaginationType": "full_numbers",
"scrollY":"350px",
"scrollCollapse": true,
"order": [ 1, 'asc' ],
"dom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": 'multi',
"sRowSelector": 'td:first-child',
"aButtons": [ 'select_all', 'select_none', ]
},
"aoColumns":
[
{ "data": null, defaultContent: '', orderable: false},
{ "mData": 0 },
{ "mData": 1 },
{ "mData": 2 },
],
});

Have a look at this demo - http://live.datatables.net/kesijisi/1 - is this what you want it to do?

jQuery datatables tabletools buttons didn't show up

Can anyone explain why TableTools (http://datatables.net/extensions/tabletools/) not show up.
I'm using the following js sources:
<script src="external/jquery/jquery.js"></script> //Version 1.10.2
<script src="jquery-ui.js"></script> //Version 1.11.2
<script src="jquery.dataTables.js"></script> // Version 1.10.4
<script src="dataTables.tableTools.js"></script> //Version 2.2.3
Thats the js for the datatable and tabletools.
$('#report-datatable').dataTable({
"processing": true,
"serverSide": false,
"paging": false,
"ajax": {
type: 'POST',
url: 'sources/report_table.php',
data: {
miDate: minval,
maDate: maxval,
retour: sap_retour,
hubew: sap_hubew,
nolkscan: nolkscan
}
},
"columns": [
{ "data": "LSAP" },
{ "data": "DatumSAP" },
{ "data": "Warenempfaenger" },
{ "data": "LSLK" },
{ "data": "DatumLK" }
],
"createdRow": function (row, data, index) {
if (data['LSLK'] == null){
$(row).css('background-color', 'lightcoral');
}
},
"dom": 'T<"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"TableTools": {
"Buttons": [
"print",
{
"Extends": "collection",
"ButtonText": "Save",
"Buttons": [ "csv", "xls", "pdf" ]
}
]
},
"destroy": true
});
Everything works exprect the tabletools.
Thanks!

Solution:
$(document).ready(function() {
var report1table = $('#report1-datatable').dataTable();
function reporttable(minval,maxval,sap_retour,sap_hubew,nolkscan){
$.ajax({
type: 'POST',
url: 'sources/report_table_scans.php',
data: {
miDate: minval,
maDate: maxval,
retour: sap_retour,
hubew: sap_hubew,
nolkscan: nolkscan
},
success: function(result){
obj = JSON.parse(result);
loadDatatable(obj['data']);
},
error: function (result) {
alert('Fehler beim Laden der Daten. ' + result.responseText);
}
});
};
function loadDatatable(aaData){
report1table.dataTable({
"dom": 'Tti',
"deferRender": true,
"serverSide": false,
"paging": false,
"data": aaData,
"columns": [
{ "data": "LSAP" },
{ "data": "DatumSAP" },
{ "data": "Warenempfaenger" },
{ "data": "LSLK" },
{ "data": "DatumLK" }
],
"createdRow": function (row, data, index) {
if (data['LSLK'] == null){
$(row).css('background-color', 'lightcoral');
}
},
tableTools: {
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
},
"destroy": true
});
};

Datatable delete link

I can create and edit a record in a datatable with jQuery. I am having trouble deleting a record. Here is my code. Thanks for the help.
// New record
$('a.editor_create').on('click', function (e) {
e.preventDefault();
editor.create(
'Create new record', {
"label": "Add",
"fn": function () {
editor.submit()
}
});
});
// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit(
$(this).parents('tr')[0],
'Edit record', {
"label": "Update",
"fn": function () {
editor.submit()
}
});
});
$('#example').dataTable({
"sDom": "Tfrtip",
"sAjaxSource": "browsers1.json",
"aoColumns": [{
"mData": "sn"
}, {
"mData": "reg_name"
}, {
"mData": "audit_name"
}, {
"mData": "audit_data"
}, {
"mData": "minor",
"sClass": "center"
}, {
"mData": "major",
"sClass": "center"
}, {
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit'
}]
});

how to add class to jquery.datatables columns?

I made a large table for jquery.datatables which is works great for me.
but i need a class name set to each td element relative to its column.
fo example i want a column (including th and all td's) have a class="volume".
there is this issues:
i use this code to initialize the class but it is not working.
"aoColumnsDefs": [
{ "sClass": "volume", "aTargets": [2] }
]
EDIT:
my table is created and refeshes dynamically. and it is made of a js-array which i prefer not to touch it ie. just to add class names
EDIT:
iuse this code to itialize my table:
$('#dataTable').dataTable({
"aaData": dataCnt,
"aoColumnsDefs": [
{ "sClass": "volume", "aTargets": [2] }
],
"aoColumns": columnsHd,
"bStateSave": true,//saving status in coockie
"iCookieDuration": 10,//coockie life duration in seconds
"sScrollX": "100%",
"sScrollY": (winHei-200),
"sDom": '<"H"RCfrl>t<p"F"i>',
"oColVis": {
"buttonText": " ",
"bRestore": true,
"sAlign": "left"
},
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
i hope it helps
*EIDT: *
columnsHd is an array which is created dynamicaly from my json headers and now is exactly:
[
{ "sTitle": "macaddr" },
{ "sTitle": "lat" },
{ "sTitle": "ip" },
{ "sTitle": "clientname" },
{ "sTitle": "relay0mask" },
{ "sTitle": "relay0stat" },
{ "sTitle": "relay1stat" },
{ "sTitle": "clientid" },
{ "sTitle": "bldname" },
{ "sTitle": "uptime" },
{ "sTitle": "current" },
{ "sTitle": "temperature" },
{ "sTitle": "softver" },
{ "sTitle": "volume" },
{ "sTitle": "hardver" },
{ "sTitle": "relay1mask" },
{ "sTitle": "pic" },
{ "sTitle": "comment" },
{ "sTitle": "lon" },
{ "sTitle": "rtt" },
{ "sTitle": "bldaddr" },
]

My guess is that "aoColumns": columnsHd, overrides the "aoColumnsDefs": [ { "sClass": "volume", "aTargets": [2] } , ],
Try to replace their order in code
Or just add the class directly in "aoColumns": columnsHd,
like this "sClass": "volume"
complete code :
try changing { "sTitle": "ip" }, into { "sTitle": "ip", "sClass": "volume" },
and remove the
"aoColumnsDefs": [
{ "sClass": "volume", "aTargets": [2] }
],
Note that in datatables 1.10 you should use aoColumnDefs

The answer for the question is
"aoColumnsDefs": [
{ "sClass": "classname", "aTargets": [whatever target you want to apply] }
]
to use other options: (ref datatable)