Displaying hidden field content working inconsistently

allan

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.

Regards,
Allan

vikinggoat

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]

allan

Nothing I can see there stands out to suggest that it have changed due to changes in jQuery or DataTables.

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

vikinggoat

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.

vikinggoat

Correction, fnOpen kicks in and the information is applied, but it's incredibly laggy.

allan

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?

Allan

vikinggoat

It seems 40+% of the render time is dedicated to a function called "ua" in dataTables

allan

Try the unminifed version - `ua` could be anything :-)

Allan

vikinggoat

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]

vikinggoat

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]

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]

allan

The looks like it should work to me - I presume its entering the `success` function, which you can confirm with your alerts?

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

vikinggoat

Unfortunately, until you and I started talking about it, nothing.
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]

allan

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.

Allan