Drill-down data - Page 2

Drill-down data

2

Replies

  • ecbahrecbahr Posts: 2Questions: 0Answers: 0
    Is there anyway to keep the expanded row after calling a fnDraw to refresh the JSON data?
  • jonnyd55jonnyd55 Posts: 2Questions: 0Answers: 0
    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!

    Code: http://media.hamptonroads.com/media/content/pilotonline/Datatables/football/footballRecruits.html
  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin
    @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

    Allan
  • steveb321steveb321 Posts: 2Questions: 0Answers: 0
    I ended up solving this by closing the rows on footer callback - so all the data has already been repopulated into the table..

    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]
  • heri500heri500 Posts: 1Questions: 0Answers: 0
    edited October 2012
    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
  • southfanningsouthfanning Posts: 8Questions: 1Answers: 0
    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);
    */

    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
  • RascalRascal Posts: 2Questions: 0Answers: 0
    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>



    @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]
  • mecuriomecurio Posts: 1Questions: 0Answers: 0
    @Rascal
    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]
  • roxstyleroxstyle Posts: 3Questions: 0Answers: 0
    i am lost on the dynamic way the table is built.

    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.
  • dwallendwallen Posts: 4Questions: 0Answers: 0
    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.
  • dwallendwallen Posts: 4Questions: 0Answers: 0
    Just wanted to add something to this, it also works in IE9 and above. It is only an issue with IE8/7
  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin
    @dwallen - link to a test case please: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

    Allan
  • dwallendwallen Posts: 4Questions: 0Answers: 0
    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
  • dwallendwallen Posts: 4Questions: 0Answers: 0
    alan,

    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.
  • CDeCinkoCDeCinko Posts: 19Questions: 9Answers: 1
    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);

    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]
  • CDeCinkoCDeCinko Posts: 19Questions: 9Answers: 1
    edited July 2013
    Ignore, figured out my second question. However, my first one is still unresolved.
  • prashantsharma1857prashantsharma1857 Posts: 1Questions: 0Answers: 0
    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..?
  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin
    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.

    Allan
  • andrew_fisherandrew_fisher Posts: 0Questions: 0Answers: 0
    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
  • AlastorAlastor Posts: 3Questions: 0Answers: 0
    Hey guys,

    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
  • rainolfrainolf Posts: 56Questions: 6Answers: 0
    Great job,
    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
  • nick_javanick_java Posts: 3Questions: 0Answers: 0
    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.

    Nick
  • m1stm1st Posts: 4Questions: 0Answers: 0
    Hello,

    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!
  • m1stm1st Posts: 4Questions: 0Answers: 0
    My version for collapse/expand all Drill-down rows.
    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]
  • lfreylfrey Posts: 4Questions: 0Answers: 0
    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.
  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin
    Certainly should be. Please post a link to a test page showing the problem.

    Allan
  • johnpalaganasjohnpalaganas Posts: 9Questions: 2Answers: 0
    edited January 2014
    How can I achieve implementing 2 instance of fnFormatDetails when I have 2 different tables? Thank you!
  • lfreylfrey Posts: 4Questions: 0Answers: 0
    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.
  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin
    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.

    Allan
  • lfreylfrey Posts: 4Questions: 0Answers: 0
    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


    Test1
    Test2
This discussion has been closed.