I'm trying to get expandable rows on my dataTable that uses a google spreadsheet as it's data source. I used tabletop.js to pull the data and push it to datatables, but I have to use 'sTitle' in order for dataTables to read my spreadsheet correctly.
I need to use mdataProp, to get the expandable row working, correct? Wondering if anyone has any solutions. Thanks!
@jonnyd55: If you want to read object properties for your columns - then yes, mDataProp is the way forward: http://datatables.net/blog/Extended_data_source_options_with_DataTables
Hi Allan, Thanks for providing this excellent plugins, I have use this datatables many time, but one thing that I can't figure out is, when I'm using Drill down then I try to make the drill down content also use the datatables, the tables is display correctly but all the datatables feature is not working, such as filtering, sorting, paging, all feature is not working (in drill down content that I apply the datatables on it), is there any function or solution to fix this, thanks for helping me
I have an accordion ul and in each section of the accordion I'm using a drilldown table. The drilldown table is created when I click the header to expand out a section of the accordion.
If I view a table in one category , then move to another category, then come back to the original category, I can no longer drill down. I get an error: 'aoData' is null or not an object when I click the + button.
What am I missing?
I've replaced the static '#example' with my variable name.
function initTable(category)
{
getPats(category);
var aDataSet = getDataSet();
var anOpen = [];
var sImageUrl = "../images/";
/*var tbl = document.getElementById(category);
if (tbl)
tbl.parentNode.removeChild(tbl);
*/
I'm new to Datatables, jQuery, and MVC and am trying to model your example for drill-down tables. Naturally I wouldn't be trying something easy first! :) The Ajac call is working, and I've got the master rows of the table rendering but can't get the .live event to fire. I tried putting an alert in there and it doesn't do anything. I think I may be missing some CSS and can't find anything on it. Perhaps I'm barking up the wrong tree? I think my code is close but can't quite get there. Also, I get an uncaught error trying to use .live so I switched it to .on after seeing that .live is deprecated. This is an ASP.Net project
I would be grateful for any pointers you can give me, particularly on how .live works... is that jQuery or DataTables? I'm stumped at the moment.
Here is my code:
//_Layout.vbhtml defines includes
[code]
<!DOCTYPE html>
BatchID
Transmitted Date/Time
Completed Date/Time
Created By
Created Date/Time
// This will run the code instead the function() {} as soon as the page is ready.
// Hence: Document.ready
$(document).ready(function () {
var anOpen = [];
var oTable;
var sImageURL = "/Images/"; //path to image files
// AJAX call to get batch list
// it will return into the data object
$.ajax(
{
type: "GET",
url: '@Url.Action("FetchBatchList", "Batch")',
error: function (xhr, statusText, errorThrown) {
if (statusText === 'timeout')
alert('The server is not responding');
if (statusText === 'error')
alert("Error: " + errorThrown);
}, //end of ajax error block
success: function (data) {
//"sAjaxSource": "",
// Create Data Table
oTable = $('#batch_table').dataTable(
{
"bProcessing": true,
"aaData": data.BatchList, // Initialize datatables with data object
"aoColumns": [ // Bind table columns with properties
{
"mData": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mData": "BatchID" },
{ "mData": "Transmitted_DateTime" },
{ "mData": "Completed_DateTime" },
{ "mData": "Created_EmpID" },
{ "mData": "Created_DTTM" }
]
}); // End dataTable()
//debugger;
} //end of ajax success block
}); // end $.ajax call
}); // end $(document).ready(....
// animation control code
$('#batch_table td.control').on('click', function () { //.live is deprecated in jQuery 1.7... use .on instead
alert('Hello from animation control code');
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
debugger;
1. i can not get the oData to show in my sample using the same code as the site sample. So i have the initial table structure in the markup.
2. once i have clicked the control button, i get an error
"Cannnot read property of 'aoData' of null"
with a reference to the following line
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr) , 'details' );
i have an array like the sample
can someone give me a direction of where to look to fix this? is it a problem with the array? the markup? or something i am just unaware of?
i understand how to .append a row with jquery, but i don't know if that will work with datatables.
hello everyone, first time here so be gentle.
I want to thank Alan and everyone for the great examples and incite posted here. I have implement drill down tables successfully with one exception.
I implemented a datatable on the drill down table and it's working fine in all browser except IE.
I get the table but the datatable was not applied.
If anyone has any incite or sugestion I would greatly appreciate it.
allan,
Unfortunately I am unable to expose the site to the internet right now. I have include the drill down table code. Please let me know how else I can help in resolving this. I will work on posting a test case to live.datatables.net
Thanks
David
[code]
$('#basetable td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
I believe I have resolved my problem. I have moved the datatable instantiation to the control function from the fnFormatDetails function.
Thanks for the great JavaScript solution.
I have the drilldown working nearly perfect with the only change in your sample being updating the trigger to on for jQuery 1.9.x. The slideup annimation works perfectly, however the slidedown animation does not work at all. My details just pop into place, no slide at all.
How can I troubleshoot this?
[code]
$(document).on("click", "#classifiedAds td.control", function () {
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
Is it possible to create nested datatables with the features such as Column Reordering and column resizing , in such a way that if columns of external datatable are reordered or resized then the same effects should be applied to the inner datatable, considering the column headers in the nested table to be exactly same as the outer table..?
Currently no - there is no easy way of doing that - sorry. You could probably write a script to keep multiple DataTables in sync, but there isn't existing code for that.
Hi, sorry I'm kinda newby with jquery datagrid. I've found your post and the whole Datatables.net script very interesting.
I'm developing a web application that requires most of these features. Particularly in this example ( slidedown-slideup) it's not clear to me where the div with class .innerDetails is placed in the DOM..the original example worked fine for me:
$('#example tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
but not this one with slideup-down functions which is the one I need..
thank for your time! best regards
Hello all,
I have been trying to integrate Drill-down rows with Row Grouping - Collapsible/Expandable Grouping. Everything works well. Thanks to the great work. My problem is when my Drill-down row is open and I collapse row group. My application does not work. This is the message I get:
too much recursion
...),h=h.slice(c.length),c.type=g,c.matches=d);if(!c)break}return b?h.length:h?bc.e...
Do anybody know how to fix this? Any help would be appreciated.
Thank you.
What's the script to collapse/expand all Drill-down rows? I'm using this example: http://datatables.net/blog/Drill-down_rows
May be it's possible to correct this code:
[code]
$("#expandAllTR").click(function() {
oTable.$('tr').each(function() {
if (oTable.fnIsOpen(this)) {
oTable.fnClose(this);
} else {
var position = oTable.fnGetPosition(this);
var info = oTable.fnGetData(position)[11];
oTable.fnOpen(this, fnFormatDetails(oTable, this), 'details');
}
});
if ($("#expandAllTR").html() == "Expand all") {
$("#expandAllTR").html("Collapse all");
} else {
$("#expandAllTR").html("Expand all");
}
});
[/code]
Is it possible to use both the row details functionality and complex (multi-row) headers? When I put both in, I cannot figure out how to correctly attach the new column so that the 'expand' button is under a new header.
I didn't do the includes correctly, but you can at least see that the columns do not work:
http://live.datatables.net/aXIr/1/edit?html,output
If I add a blank at the start, then the second row of headers is moved all the way to the left instead of lining up properly. If I also add in column filtering functionality (in the footer), then adding a blank header breaks that as well.
I will try to provide a working test case showing the problem sometime next week if I can get some time to do so. Until then, if you could give me a working test case that would be very helpful.
I can't figure out how to properly include the datatables packages in this workbench, but this test case is just the provided row details example, with two additional columns of data (test1 and test2), which in the header are subsets of "Test column". So, I added to columns of bogus data to each row and made the header:
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Test column
Replies
I need to use mdataProp, to get the expandable row working, correct? Wondering if anyone has any solutions. Thanks!
Code: http://media.hamptonroads.com/media/content/pilotonline/Datatables/football/footballRecruits.html
Allan
If you try to use other callbacks, not enough of the state has been initialized yet to call fnClose...
[code]
fnFooterCallback: function( nFoot, aData, iStart, iEnd, aiDisplay ) {
$(oTable).find("tr").each(function() {
if (oTable.fnIsOpen(this)) {
oTable.fnClose(this);
}
});
}
[/code]
If I view a table in one category , then move to another category, then come back to the original category, I can no longer drill down. I get an error: 'aoData' is null or not an object when I click the + button.
What am I missing?
I've replaced the static '#example' with my variable name.
function initTable(category)
{
getPats(category);
var aDataSet = getDataSet();
var anOpen = [];
var sImageUrl = "../images/";
/*var tbl = document.getElementById(category);
if (tbl)
tbl.parentNode.removeChild(tbl);
*/
var oTable = $('#'+category).dataTable( {
"bProcessing": false,
"bDestroy": true,
"aaData": aDataSet,
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "patname" },
{ "mDataProp": "age" },
{ "mDataProp": "fin" },
{ "mDataProp": "roombed" }
]
} );
$('#'+category+' td.control').live( 'click', function ()
{
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
if ( i === -1 )
{
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
}
else
{
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function ()
{
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
} );
}
Thanks in advance
I would be grateful for any pointers you can give me, particularly on how .live works... is that jQuery or DataTables? I'm stumped at the moment.
Here is my code:
//_Layout.vbhtml defines includes
[code]
<!DOCTYPE html>
@ViewData("Title")
<!---->
@RenderBody()
[/code]
//view page
[code]
@ModelType MVC3Test.BatchCollection
@Code
ViewData("Title") = "Batchlist2"
End Code
Batchlist2
BatchID
Transmitted Date/Time
Completed Date/Time
Created By
Created Date/Time
// This will run the code instead the function() {} as soon as the page is ready.
// Hence: Document.ready
$(document).ready(function () {
var anOpen = [];
var oTable;
var sImageURL = "/Images/"; //path to image files
// AJAX call to get batch list
// it will return into the data object
$.ajax(
{
type: "GET",
url: '@Url.Action("FetchBatchList", "Batch")',
error: function (xhr, statusText, errorThrown) {
if (statusText === 'timeout')
alert('The server is not responding');
if (statusText === 'error')
alert("Error: " + errorThrown);
}, //end of ajax error block
success: function (data) {
//"sAjaxSource": "",
// Create Data Table
oTable = $('#batch_table').dataTable(
{
"bProcessing": true,
"aaData": data.BatchList, // Initialize datatables with data object
"aoColumns": [ // Bind table columns with properties
{
"mData": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mData": "BatchID" },
{ "mData": "Transmitted_DateTime" },
{ "mData": "Completed_DateTime" },
{ "mData": "Created_EmpID" },
{ "mData": "Created_DTTM" }
]
}); // End dataTable()
//debugger;
} //end of ajax success block
}); // end $.ajax call
}); // end $(document).ready(....
// animation control code
$('#batch_table td.control').on('click', function () { //.live is deprecated in jQuery 1.7... use .on instead
alert('Hello from animation control code');
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
debugger;
if (i === -1) {
$('img', this).attr('src', sImageURL + "details_close.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div.innerDetails', nDetailsRow).slidedown();
anOpen.push(nTr);
}
else {
$('img', this).attr('src', sImageURL + "details_open.png");
$('div.innerDetails', $(nTr).next()[0]).slideup(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
// detail table row html goes in the following section
function fnFormatDetails(oTable, nTr) {
var oData = oTable.fnGetData(nTr);
debugger;
var tranData; //this will contain an instance of a transaction object from the transactions collection
for (tranData in oData.TranCollection) {
var sOut = '' +
'' +
'' +
'TransactionID:' + tranData.ID + '' +
'SOR_ID:' + tranData.SystemOfRecordID + '' +
'PostingFlag:' + tranData.PostingFlag + '' +
'Posting_DTTM:' + tranData.Posting_DTTM + '' +
'PostingMessage:' + tranData.PostingMessage + '' +
'PostingMessage:' + tranData.XMLTransactionData + '' +
'' +
'' +
'';
return sOut;
}
}
[/code]
When using .on to replace .live the syntax changes. Your line
[code]$('#batch_table td.control').live('click', function () {[/code]
would become
[code]$(document).on('click','#batch_table td.control', function () {[/code]
http://www.roxstyle.com/roxprojects/blssi/studiosystem-v4-2013/ssv4/html-nbcu/nbc-pitchgrid.html
1. i can not get the oData to show in my sample using the same code as the site sample. So i have the initial table structure in the markup.
2. once i have clicked the control button, i get an error
"Cannnot read property of 'aoData' of null"
with a reference to the following line
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr) , 'details' );
i have an array like the sample
can someone give me a direction of where to look to fix this? is it a problem with the array? the markup? or something i am just unaware of?
i understand how to .append a row with jquery, but i don't know if that will work with datatables.
I want to thank Alan and everyone for the great examples and incite posted here. I have implement drill down tables successfully with one exception.
I implemented a datatable on the drill down table and it's working fine in all browser except IE.
I get the table but the datatable was not applied.
If anyone has any incite or sugestion I would greatly appreciate it.
Allan
Unfortunately I am unable to expose the site to the internet right now. I have include the drill down table code. Please let me know how else I can help in resolving this. I will work on posting a test case to live.datatables.net
Thanks
David
[code]
$('#basetable td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
if ( i === -1 ) {
$('img', this).attr( 'src', "/mf/forward/images/details_close.png" );
baseTable.fnOpen( nTr, fnFormatDetails(baseTable, nTr), 'details' );
anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', "/mf/forward/images/details_open.png" );
baseTable.fnClose( nTr );
anOpen.splice( i, 1 );
}
} );
function fnFormatDetails( oTable, nTr )
{
//alert(nTr);
var oData = oTable.fnGetData( nTr );
//alert(oData[11]);
var fundNum = oData[11].trim();
var sOut =
''+
'' +
'$("#tableDetails'+fundNum.trim()+'").dataTable( {'+
'"bFilter": false,'+
'"bPaginate": false,'+
'"bInfo": false,'+
'"bAutoWidth": false,'+
'"oLanguage": {'+
' "sEmptyTable": "No transactions were found. Please modify your criteria and search again."'+
'},'+
'"aoColumns": ['+
' { "sTitle": "Trade Date",'+
' "sClass": "left" },'+
' { "sTitle": "Description",'+
' "sClass": "right" },'+
' { "sTitle": "Price",'+
' "sClass": "right" },'+
' { "sTitle": "Shares",'+
' "sClass": "right" },'+
' { "sTitle": "Amount",'+
' "sClass": "right" }'+
']'+
'});' +
'' +
''+
'';
if(detailsTableData.length > 0 )
{
for(var i=0;i
I believe I have resolved my problem. I have moved the datatable instantiation to the control function from the fnFormatDetails function.
Thanks for the great JavaScript solution.
How can I troubleshoot this?
[code]
$(document).on("click", "#classifiedAds td.control", function () {
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
if (i === -1) {
$('img', this).attr('src', "/images/details_close.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div.innerDetails', nDetailsRow).slideDown('slow');
anOpen.push(nTr);
}
else {
$('img', this).attr('src', "/images/details_open.png");
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
[/code]
Allan
I'm developing a web application that requires most of these features. Particularly in this example ( slidedown-slideup) it's not clear to me where the div with class .innerDetails is placed in the DOM..the original example worked fine for me:
$('#example tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
but not this one with slideup-down functions which is the one I need..
thank for your time! best regards
I just use this dataTable option and got a problem using Jquery Live function (removed since 1.9).
This thread need an update, use .click function or .on function !
Guillaume
i would post this comment cause i'm trying to develop a google chart inside the fnFormatDetails function.
The problem resides in the way to write html data.
So the html in the fnFormatDetails are written only after a click event so in general no jquery selection are possible.
In deep google-chart make a jquery selection of an element in the page already present and then it writes the chart inside.
This is not the case.
If we take a look in a general view the question could be: "How we can make a jquery selection in any div inside inner part?"
Could anyone have any answer on it?
Thank you
I have been trying to integrate Drill-down rows with Row Grouping - Collapsible/Expandable Grouping. Everything works well. Thanks to the great work. My problem is when my Drill-down row is open and I collapse row group. My application does not work. This is the message I get:
too much recursion
...),h=h.slice(c.length),c.type=g,c.matches=d);if(!c)break}return b?h.length:h?bc.e...
Do anybody know how to fix this? Any help would be appreciated.
Thank you.
Nick
What's the script to collapse/expand all Drill-down rows? I'm using this example: http://datatables.net/blog/Drill-down_rows
May be it's possible to correct this code:
[code]
$("#expandAllTR").click(function() {
oTable.$('tr').each(function() {
if (oTable.fnIsOpen(this)) {
oTable.fnClose(this);
} else {
var position = oTable.fnGetPosition(this);
var info = oTable.fnGetData(position)[11];
oTable.fnOpen(this, fnFormatDetails(oTable, this), 'details');
}
});
if ($("#expandAllTR").html() == "Expand all") {
$("#expandAllTR").html("Collapse all");
} else {
$("#expandAllTR").html("Expand all");
}
});
[/code]
Thank you!
How to add slideUp animation to collapse script?
[code]
$("#expandAllTR").click(
function() {
oTable.$('tr').each(
function() {
$('img', this).attr('src',
sImageUrl + "details_close.png");
var nDetailsRow = oTable.fnOpen(this, fnFormatDetails(
oTable, this), 'details');
$('div.innerDetails', nDetailsRow).slideDown();
});
});
$("#collapseAllTR").click(function() {
oTable.$('tr').each(function() {
$('img', this).attr('src', sImageUrl + "details_open.png");
oTable.fnClose(this);
});
});
[/code]
Allan
http://live.datatables.net/aXIr/1/edit?html,output
If I add a blank at the start, then the second row of headers is moved all the way to the left instead of lining up properly. If I also add in column filtering functionality (in the footer), then adding a blank header breaks that as well.
Allan
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Test column
Test1
Test2