Row hiding with javascript Array as a data source

ahmadassaf

Hey all,

I have a data table that is initialized with a javascript array of three columns .. i have the colvis plugin installed to show/hide columns .. having the row hide is not working in my case .. so far i am only filling it with data from mytable nthng fancy ..

i am taking out the data from a JSON and saving it into an array .. and giving that as a data source ... now i ahve several problems :

1 - i got two different behaviors when i execute
[code]
$(elmts.dialogTable).find('thead tr').each(function() {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
[/code]
before or after the table initialization !!
2 - now am executing the code after the table creation to ahve data inside .. the table looks nasty and it will break on sorting or searching ... etc.

[code]
var matches = [];
for ( var result in response) {
matches.push([ response[result][1], response[result][2],
response[result][3] ]);
}
if (!matches.length) {
alert("No Valid Matches Were Found !! ");
}

function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += 'Documentation:'
+ "No Extra information Found ..." + '';
sOut += 'Source Data Type:'
+ "No Extra information Found ..." + '';
sOut += 'Target Data Type:'
+ "No Extra information Found ..." + '';
sOut += '';
return sOut;
}

function addExtraDetails() {
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$(elmts.dialogTable).find('thead tr').each(function() {
this.insertBefore(nCloneTh, this.childNodes[0]);
});

$(elmts.dialogTable).find('tbody tr').each(function() {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
}

// Initializing AMC Table
oTable = $(elmts.dialogTable).dataTable({
"sDom" : 'RC<"clear">lfrtip',
"sScrollY" : 400,
"sScrollX" : "100%",
"sScrollXInner" : "100%",
"sPaginationType" : "full_numbers",
"aaData" : matches,
"aoColumns" : [ {
"sTitle" : "Source column"
}, {
"sTitle" : "Target Column"
}, {
"sTitle" : "Similarity Score",
"sClass" : "center"
}, {
"sTitle" : "Version",
"sClass" : "center"
} ],
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ 0 ],
} ],
"aaSorting" : [ [ 1, 'desc' ] ]
});

addExtraDetails();

$(elmts.dialogTable).find('tbody td img').live('click', function() {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
/* This row is already open - close it */
this.src = "images/details_open.png";
oTable.fnClose(nTr);
} else {
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
[/code]

i really appreciate any help

}
});

ahmadassaf

issue was fixed .. apprently when using any external data source other than the DOM we need to send this line [code]''[/code] and assign it to the first column