I've just added this option to TableTools 2.1.1 dev (which will be released soon) - you can get it from the downloads page as the current nightly: http://datatables.net/download/ . To enable the details rows for the exports, you need to enable the bOpenRows option for the buttons that you want this to be used for. One thing to note is that it does effect the message that says how many rows have been copied, since this effectively counts as a separate row. I'll be looking at how this can be improved with the v3 TableTools update or you can override it using the fnComplete callback for the button.
We put something like this together a little over four months ago, and it was working fine until rather recently (or at least it was very recently revealed to me that it wasn't working anymore). Do you know if there have been any changes in the world of jQuery that might prevent it from working anymore? (using version 1.9.1 of the dataTables plugin)
[code]
$("#parentTable tbody").on( "click", "td.detailSwitch", function (){
var nTr = $(this).parent().parent()[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
}
});
[/code]
Unfortunately that does nothing, I also tossed an alert between lines 1 and 2, with no results.
I tried changing the code to the following:
[code]
$("div.detailSwitch").click(function (){
var nTr = $(this).parent("tr")[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
$(this).html(\'\');
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
$(this).html(\'\');
}
});
[/code]
Which causes the html of the div classed "detailSwitch" to change, but then breaks the functionality.
So I guess the question is - what has changed? Have you updated a library, or added code? If you use the profiler in Firebug or Webkit, does it show that there is a very heavy process going on?
32.97% fnGatherData
Also, as before (and for the same reason you told me) the .click() event is a waste of time but for some reason the following still does nothing.
[code]
$("#parentTable tbody").on( "click", "td.detailSwitch", function (){
alert("test click");
var nTr = $(this).parent().parent()[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
}
});
[/code]
Made some further modifications to the code to test if its calling the getRollUpComments() function, which it seems to be, but it seems to skip the call for fnOpen.
Code for TR click follows:
[code]
$(".detailSwitch").click( function (){
alert("test click");
var nTr = $(this).parent("tr")[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
$(this).html(\'\');
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
$(this).html(\'\');
}
});
[/code]
// "open" or "close" an information row when a row is clicked on
// $("#parentTable tbody").on( "click", "div.detailSwitch", function (){
$("div.detailSwitch").click(function (){
var nTr = $(this).parent("tr")[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
$(this).html(\'\');
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
$(this).html(\'\');
}
});
// open all rows
$("button#expandAllTR").click(function(){
oTable.$("tr").each(function(){
if(!oTable.fnIsOpen(this)){
var locNum = $(this).attr("id");
getRollUpComments(locNum, this);
$(this).find(".detailSwitch").html(\'\');
}
});
});
// close all rows
$("button#collapseAllTR").click(function(){
oTable.$("tr").each(function(){
if(oTable.fnIsOpen(this)){
oTable.fnClose(this);
$(this).find(".detailSwitch").html(\'\');
}
});
});
Sorry - your message got picked up by the spam filter...
It still looks okay to me on a scan through the code I'm afraid. I'm not sure what would be causing an issue there. Did you add in the console.log I suggested, just to confirm that works as expected? Also adding console.logs into the success call back would probably be a good move.
Replies
Regards,
Allan
[code]
$("#parentTable tbody").on( "click", "td.detailSwitch", function (){
var nTr = $(this).parent().parent()[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
}
});
[/code]
The one thing that does stand out for me though is this line:
> var nTr = $(this).parent().parent()[0];
If `this` is a TD cell, then you should only need one parent to get the TR:
> var nTr = $(this).parent()[0];
Or better yet, use a filter to remove that problem altogether:
> var nTr = $(this).parents('tr')[0];
Allan
I tried changing the code to the following:
[code]
$("div.detailSwitch").click(function (){
var nTr = $(this).parent("tr")[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
$(this).html(\'\');
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
$(this).html(\'\');
}
});
[/code]
Which causes the html of the div classed "detailSwitch" to change, but then breaks the functionality.
Allan
Allan
Also, as before (and for the same reason you told me) the .click() event is a waste of time but for some reason the following still does nothing.
[code]
$("#parentTable tbody").on( "click", "td.detailSwitch", function (){
alert("test click");
var nTr = $(this).parent().parent()[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
}
});
[/code]
Code for TR click follows:
[code]
$(".detailSwitch").click( function (){
alert("test click");
var nTr = $(this).parent("tr")[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
$(this).html(\'\');
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
$(this).html(\'\');
}
});
[/code]
Code for getRollUpComments() follows:
[code]
function getRollUpComments(locNum,nTr){ //Load the map data
$.ajax({
type: "POST",
url: "getRollUpComments.php",
cache: false,
data:{locNum:locNum},
dataType: "html",
success: function(data) {
alert("fnOpen Start");
oTable.fnOpen(nTr, data, "info_row" );
alert("fnOpen Done");
}, //end success
error:function (xhr, ajaxOptions, thrownError){
alert("Please try again.");
}
});
}
[/code]
I'd suggest adding a control.log(nTr) to ensure that that variable is what you expect it to be - it looks like it should be.
Beyond that, I think I would need a link to the page to see and understand what is happening I'm afraid.
Allan
If it helps here is the entirety of the javascript
[code]
$(document).ready(function(){
TableTools.BUTTONS.download = {
"sAction": "text",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "
",
"sToolTip": "",
"sButtonClass": "DTTT_button_text",
"sButtonClassHover": "DTTT_button_text_hover",
"sButtonText": "Download",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"sDiv": "",
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function( nButton, oConfig ) {
var oParams = this.s.dt.oApi._fnAjaxParameters( this.s.dt );
var iframe = document.createElement(\'iframe\');
iframe.style.height = "0px";
iframe.style.width = "0px";
iframe.src = oConfig.sUrl+"?"+$.param(oParams);
document.body.appendChild( iframe );
},
"fnSelect": null,
"fnComplete": null,
"fnInit": null
};
var oTable;
var info;
oTable = $("#parentTable").dataTable({
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"aoColumnDefs": [
{ "aDataSort": [ 7, 6, 8, 9, 10 ], "aTargets": [ 0 ] },
{ "bVisible": false, "aTargets": [ 6 ] }, //zip
{ "bVisible": false, "aTargets": [ 7 ] }, //state
{ "bVisible": false, "aTargets": [ 8 ] }, //city
{ "bVisible": false, "aTargets": [ 9 ] }, //street
{ "bVisible": false, "aTargets": [ 10 ] } //street number
],
"sDom": \'TR<"clear">lfrtip\',
"oTableTools": {
"aButtons": [
{ "sExtends": "download", "sButtonText": "Download CSV", "sUrl": "rollUpCsvMaker.php" },
"print"
]
}
}).columnFilter();
// "open" or "close" an information row when a row is clicked on
// $("#parentTable tbody").on( "click", "div.detailSwitch", function (){
$("div.detailSwitch").click(function (){
var nTr = $(this).parent("tr")[0];
if (oTable.fnIsOpen(nTr)){
oTable.fnClose(nTr);
$(this).html(\'\');
}else{
var locNum = $(nTr).attr("id");
getRollUpComments(locNum, nTr);
$(this).html(\'\');
}
});
// open all rows
$("button#expandAllTR").click(function(){
oTable.$("tr").each(function(){
if(!oTable.fnIsOpen(this)){
var locNum = $(this).attr("id");
getRollUpComments(locNum, this);
$(this).find(".detailSwitch").html(\'\');
}
});
});
// close all rows
$("button#collapseAllTR").click(function(){
oTable.$("tr").each(function(){
if(oTable.fnIsOpen(this)){
oTable.fnClose(this);
$(this).find(".detailSwitch").html(\'\');
}
});
});
function getRollUpComments(locNum,nTr){ //Load the map data
$.ajax({
type: "POST",
url: "getRollUpComments.php",
cache: false,
data:{locNum:locNum},
dataType: "html",
success: function(data) {
oTable.fnOpen(nTr, data, "info_row" );
}, //end success
error:function (xhr, ajaxOptions, thrownError){
alert("Please try again.");
}
});
}
});
[/code]
It still looks okay to me on a scan through the code I'm afraid. I'm not sure what would be causing an issue there. Did you add in the console.log I suggested, just to confirm that works as expected? Also adding console.logs into the success call back would probably be a good move.
Allan