Drill-down data - Page 2
Drill-down data
This discussion has been closed.
It looks like you're new here. If you want to get involved, click one of these buttons!
DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.
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