Drill down rows opened after init

Drill down rows opened after init

shiftymccoolshiftymccool Posts: 19Questions: 1Answers: 0
edited January 2014 in General
Hello again,

I'm having a blast working with this plugin. I've got a feature that I'm trying to implement that I can't quite figure out how to do. I have drill-down rows working with a click. What I'm looking for is to have a drill-down shown by default based on a column value.
Basically, if there is a value of "Not Resulted" in the column, show the section, if the value is anything else, keep it hidden.

I've been messing with the different callback functions with no luck and it seems, now, like I might be over-thinking it.

Anybody got any advice?

Thanks!

Replies

  • allanallan Posts: 63,310Questions: 1Answers: 10,433 Site admin
    edited January 2014
    I think fnDrawCallback is the callback you want here. Loop over the rows, checking the data and use fnOpen if needed:

    [code]
    "fnDrawCallback": function () {
    var that = this;
    $('#myTable tbody tr').each( function () {
    var data = that.fnGetData( this );

    if ( data[0] === "Not Resulted" ) {
    table.fnOpen( this, 'data' );
    }
    }
    }
    [/code]

    Allan
  • shiftymccoolshiftymccool Posts: 19Questions: 1Answers: 0
    edited January 2014
    Hi Allan,

    This looks like what I need, and it seems to be in the right place, but there's something not quite right. Even though the data is found (I'm logging output to console and it's finding my two records with "Not Resulted") the section still does not open.

    My guess is that I didn't give you enough data initially. I'm using mData (the node I need is called "resulted") and a separate function that I found in an example somewhere to open my sections. Here is the code:

    [code]
    var activitiesTable = $('#activitiesGrid').dataTable( {........} );


    $('#activitiesGrid td.control img.expandRow').live( 'click', function () {
    var nTr = this.parentNode.parentNode;
    var i = $.inArray( nTr, anOpen );

    if ( i === -1 ) {
    $(this).attr( 'src', sImageURL+"details_close.png" )
    .attr('title', 'Collapse section');
    var nDetailsRow = activitiesTable.fnOpen( nTr, fnFormatDetails(activitiesTable, nTr), 'details' );

    $('div.innerDetails', nDetailsRow).slideDown();
    anOpen.push( nTr );
    }
    else {
    $(this).attr( 'src', sImageURL+"details_open.png" )
    .attr('title', 'Expand section');
    activitiesTable.fnClose( nTr );
    anOpen.splice( i, 1 );
    }
    } );

    function fnFormatDetails( activitiesTable, nTr )
    {
    var oData = activitiesTable.fnGetData( nTr );
    var sOut =
    ''+
    '';

    if(oData.results !== '') {
    sOut += 'Results:'+oData.results+''
    }

    sOut +=
    'Note:'+oData.note+''+
    ''+
    '';
    return sOut;
    }
    [/code]

    Thanks again!
  • allanallan Posts: 63,310Questions: 1Answers: 10,433 Site admin
    What does the draw callback function you actually used look like then? It would need to be updated to get the data from the object properties, rather than an array.

    Allan
  • shiftymccoolshiftymccool Posts: 19Questions: 1Answers: 0
    Sorry, I already reverted my changes. It was kinda "hacky". I looped over the data object and checked the value of data[key]. I'll see if I can find what I had in my history.

    BTW, I'm trying to arrange for the company I work for to purchase support (since you don't accept donations) for all of your help and to support your efforts with this awesome product.

    Thanks again... and again!
  • shiftymccoolshiftymccool Posts: 19Questions: 1Answers: 0
    edited January 2014
    ok... here's my hack that doesn't work. For some reason I can't reference the value by data.resulted but when I loop through and reference by data[key] it works. Anyway, here you go, try not to laugh:

    [code]
    var that = this;
    $('#activitiesGrid tbody tr').each( function () {
    var data = that.fnGetData( this );

    for(var key in data) {
    if ( data[key] === "Not Resulted" ) {
    console.log('key: ' + key + '\n' + 'value: ' + data[key]);
    activitiesTable.fnOpen( this );
    }
    }
    });
    [/code]

    The output for console.log() is this:
    LOG: key: resulted
    value: Not Resulted
    LOG: key: resulted
    value: Not Resulted
  • allanallan Posts: 63,310Questions: 1Answers: 10,433 Site admin
    If you add `console.log( data )` on line 4, what do you get. It should be that you can hit `data.resulted` and check the value.

    Also fnOpen requires the data to display, which might be why it isn't working. That's my fault from the comment above - corrected now.

    Allan
  • shiftymccoolshiftymccool Posts: 19Questions: 1Answers: 0
    edited January 2014
    Works great! The first console.log(data) was returning null first and [object Object] after that. It was the null that was causing the data.resulted to throw an error. I replaced 'data' in the fnOpen with a call to the fnFormatDetails to complete the process.

    I'll be cleaning this up a bit to use a function call instead of the slideDown, etc in this block, but this is my fnDrawCallback currently just in case it helps anyone else out:

    [code]
    var that = this;
    $('#activitiesGrid tbody tr').each( function () {
    var data = that.fnGetData( this );
    var nDetailsRow = '';

    if(data !== null){
    if ( data.resulted === "Not Resulted" ) {
    nDetailsRow = activitiesTable.fnOpen( this, fnFormatDetails( activitiesTable, this ), 'details' );
    $('div.innerDetails', nDetailsRow).slideDown();
    anOpen.push( this );
    }
    }
    });
    [/code]

    Thanks again for all your help!
  • allanallan Posts: 63,310Questions: 1Answers: 10,433 Site admin
    Excellent to hear you managed to resolve the issue - nice one :-)
This discussion has been closed.