We Keep Coding

Datatable Nested table

I'm trying to do a master-detail with datatable, but the responsive detail table is not working. and the detail is as if it were another row, but what I want is to be a separate table, to be able to do things with it.
This is my code
HTML
<table class="table table-striped table-bordered dt-responsive nowrap table-hover " id="ListaControlCacao" width="100%" aria-describedby="DataTables_Table_0_info" role="grid">
<thead>
<tr role="row">
<th></th>
<th>Puesto de observación</th>
<th>Fecha</th>
<th>Observador</th>
<th>Boton floral</th>
<th>Floracion</th>
<th>Maduracion</th>
<th>Fructificacion</th>
<th>Valoración</th>
<th>Rendimiento</th>
<th>Enfermedades</th>
<th>Plagas</th>
</tr>
</thead>
<tbody></tbody>
</table>
JAVASCRIPT
var ListaControlCacao = $('#ListaControlCacao').DataTable({
"ajax": "/PuestoObservacionCacao/ListaPuestoObservacionCacaoxUsuario",
//"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
dom: 'rtip',
select: 'single',
rowId: 'Id',
deferRender: true,
responsive: true,
language: LenguajeDataTable,
"columns": [
{
"Width": 2,
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "PuestoObservacionCacao" },
{ "data": "Fecha" },
{ "data": "Observador" },
{ "data": "BotonFloral" },
{ "data": "Floracion" },
{ "data": "Maduracion" },
{ "data": "Fructificacion" },
{ "data": "Valoracion" },
{ "data": "Rendimiento" },
{ "data": "Enfermedades" },
{ "data": "Plagas" }
]
});
$('#ListaControlCacao tbody').on('click', 'td', function () {
if ($(this).index() == 0) {
return;
}
var tr = $(this).closest('tr');
var row = ListaControlCacao.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format()).show();
tr.addClass('shown');
var xyz = $('#ListaDetalleControlCacao').DataTable({
"bServerSide": true,
"sAjaxSource": "/Cacao/ListarControlCacao3?IdPuestoObservacion=" + row.data().Id,
"bProcessing": true,
"pageLength": 10,
//"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
dom: 'rtip',
select: 'single',
rowId: 'Id',
deferRender: true,
"responsive": true,
buttons: [
{
extend: 'colvis',
columns: ':not(:first-child)'
},
'copy',
'csv',
'excel',
'pdf',
'print'
],
language: LenguajeDataTable,
"aoColumns": [
{
"sName": "Id",
"bSearchable": true,
"bSortable": true
},
{ "sName": "Fecha" },
{ "sName": "Observador" },
{
"sName": "BotonFloral",
"sWidth": 2
},
{
"sName": "Floracion",
"sWidth": 2
},
{
"sName": "Maduracion",
"sWidth": 2
},
{
"sName": "Fructificacion",
"sWidth": 2
},
{ "sName": "ValoracionCultivo" },
{ "sName": "RendimientoCultivo" },
{ "sName": "Enfermedades" },
{ "sName": "Plagas" }
]
});
}
});
function format() {
return ' <div class="table-responsive"> <table id="ListaDetalleControlCacao" class="table table-striped table-bordered display responsive dt-responsive nowrap table-hover"><thead><tr><th>No.</th><th>Fecha</th><th>Observador</th><th>Boton Floral</th><th>Floracion</th><th>Maduracion</th><th>Fructificacion</th><th>Valoracion</th><th>Rendimiento</th><th>Enfermedades</th><th>Plagas</th></tr></thead><tbody></tbody></table> </div>';
}
And that's how it looks:

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 ?

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
});
};

Cant get my datatable to appear was working fine

This probably just needs another pair of eyes as I am missing something simple. Everything was working and I think I did something simple someplace.
$(document).ready(function () {
$('#dblist').on('change', function () {
var selected = $("select option:selected").text();
tablefill(selected);
});
$('#search').click(function () {
var selected = $("select option:selected").text();
tablefill(selected);
});
function tablefill(selected) {
$('#sbar').show();
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
"sScrollY": "500px",
"bDeferRender": true,
"bDestroy": true,
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [1] }
],
"aoColumns": [
{ "mData": "calldate" },
{ "mData": "recordingfile" },
{ "mData": "uniqueid" },
{ "mData": "src" },
{ "mData": "did" },
{ "mData": "lastapp" },
{ "mData": "dst" },
{ "mData": "disposition" },
{ "mData": "duration" },
{ "mData": "userfield" },
{ "mData": "accountcode"}],
"iDisplayLength": 20,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}
]
}
});
}
});
If you see any improvements or useless code do tell me aswell, I am always looking to learn.

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)