Drill down in Datatables

Salmanzafar214

Hi,

first of all i like to say thanks for hard work done by Datatable team. its really wonderful and easy to use.i m facing an issue . i have a datatable that gets data from server and its working fine. problem is that i wanted to show a subgrid in datatable

i have followed the blog . http://datatables.net/blog/Drill-down_rows and after following the blog post i can make my subgrid to show . but i i want my child row to take same amount of space for individual column as parent columns taking not a single table with multiple td

this is allan comment
[quote] what you would need to do is run a Javascript function over your table before initialising DataTables, reading your details rows, attaching them to their parents as a property (so there is a relationship between then) and then removing the details rows from the DOM. Then initialise DataTables and when you need to show a details row, just put the row you previous removed back in :-) [/quote]

i dont know wat he mean by reading details row and attaching it to parent as property . just cldnt get it( m not good in js)

[quote]i used datatable debugger . my sixnumbers are -> enegow ( i dont know how much it can help)[/quote]

What i did up to now:

1) Ajax request sent to server that brings the column list from there i create columns header and footer for table.

[code]
var jsoncolumnarr = new Array();
var jsonobj = {};
var foo = data.columns;
var hhtml = null;
var fhtml = null;
for (var key in foo) {
jsonobj = {};
if (key === "EmailAddress" || key === "Company") {
hhtml += '' + key + '';
}
else {
hhtml += '' + key + '';
}
if (key === "ID") {
jsonobj.bSortable = false;
fhtml += '';
}
else {
fhtml += '';
jsonobj.bSortable = true;
}

jsonobj.mData = 'columns.' + key;
jsonobj.sClass = 'center';
jsonobj.sWidth = '100px';
jsoncolumnarr.push(jsonobj)
}
hhtml += '';
fhtml += '';

jsonobj = {};
jsonobj.sTitle = "Delete";
jsonobj.bSortable = false;
jsonobj.sClass = 'center';
jsonobj.sWidth = '40px';
jsonobj.sDefaultContent = "";
jsoncolumnarr.push(jsonobj)

$("#table-test thead tr").html(hhtml);// adding header elements
$("#table-test tfoot tr").html(fhtml); //adding footer elements
return jsoncolumnarr;
[/code]

2) I initialize datatable and it gets data from server .
3) to show data grid i used Example that i mentioned above

[code]
fnFromatDetails: function (nTr) {
var aData = adocs.dc.dTable.fnGetData(nTr);
//var sOut = '';
var sOut = '';
sOut += '';

for (var i = 0; i < aData.childUser.length; i++) {
sOut += '' + aData.childUser[i].columns.UserName + '' + aData.childUser[i].columns.EmailAddress + '';
}
sOut += '';
sOut += '';

return sOut;}
[/code]

what i wanted
1) i want my subgrid to use same style and space like parent grid.

how can i do that . any help will be appreciated . i dont have public website otherwise i must have given link m testing it on local host