Drill-Down Rows w/ Static Content

Drill-Down Rows w/ Static Content

hecsan07hecsan07 Posts: 4Questions: 0Answers: 0
edited October 2012 in DataTables 1.8
Hey,

I am fairly new to Datatables. In fact, this is the first time I am using them.
I am trying to create Drill-Down rows with static content. I saw the section on Drill-Down rows, but there are still some things I don't understand. I think my confusion stems from the fact that I am not binding to an external source. What I am doing is creating the HTML markup for a table and then converting calling the dataTable method on it to convert it to a Datatable. Below is a sample of my table and the script I use to create it. The first column is for the image that will trigger the showing/hiding of the drilled-downed row:

<!-- Start Data Tables Initialisation code -->

$(document).ready(function () {
oTable = $('#questions').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});

<!-- End Data Tables Initialisation code -->





Question Name
Is Required
Modified Date
Status





Question 1
Yes
10/10/2012
No


Question 2
Yes
10/10/2012
No


Question 3
Yes
10/10/2012
No


Question 4
No
10/10/2012
No


Question 5
Yes
10/14/2012
No





I will definitely I appreciate any help you can provide me, as I am stuck in this process.

Hector

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    > The first column is for the image that will trigger the showing/hiding of the drilled-downed row:

    Where is the content for the details row coming from? You can pass the string into fnOpen for the content - it doesn't matter where it comes from (Ajax, another element, whatever).

    Allan
  • hecsan07hecsan07 Posts: 4Questions: 0Answers: 0
    Allan

    Thanks for replying. The content is part of the same record the parent row is populated from; it's another data point that's just too long to be shown on the table but important enough that it merits space within it.
    My problem is that I have no clue how to go about writing the code for this. So, if you can show me a quick example, I would deeply appreciate it.

    Hector
  • hecsan07hecsan07 Posts: 4Questions: 0Answers: 0
    Allan

    This is what I am doing now and it still doesn't work:

    // 'open' an information row when a row is clicked on
    $('#questions tbody tr td a.open').click(function (e) {
    e.preventDefault();
    if (oTable.fnIsOpen(this)) {
    oTable.fnClose(this);
    } else {
    oTable.fnOpen(this, "Temporary row opened", "info_row");
    }
    });

    oTable = $('#questions').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"
    });

    Assume the same HTML as before with the exception of added to the first column of every row in the tbody secion.

    Hector
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I'll try to make some time in the next week or so to create an example. However, what stands out for me in the above code is:

    > $('#questions tbody tr td a.open')

    and

    > oTable.fnOpen(this

    You are passing the 'A' element into fnOpen, but it is expecting a TR element as you'll see from the documentation. So that wouldn't work. Use something like `$(this).parents('tr')[0]` to get the TR.

    Allan
  • hecsan07hecsan07 Posts: 4Questions: 0Answers: 0
    Allan,

    Thank you very much for your help. Your last suggestion worked. I have yet two milestones to reach.
    The first is that I need to render HTML in my new row. The method I am using to get the data I need to show on my new drilled-down row is part of the same recordset that fills the table. So, I hid a columns and then take that data and display on my new drilled-down row. I am not sure this is the correct way to do this, but for the most part it is working for me. The problem I have is that sometimes the data I get is formatted HTML code. I don't want to see the HTML code but its rendering. I am looking around to see how I can accomplish this, but have to yet find a solution.
    The second milestone is to get the drilled-down to slide up/down. This is not as important as the first milestone but it'd be nice to have.
    The following is the code I am using:


    function fnFormatDetails(oTable, nTr) {
    var aData = oTable.fnGetData(nTr);
    var sOut = aData[0];

    return sOut;
    }

    $(document).ready(function () {
    var oTable;

    // 'open' an information row when a row is clicked on
    $('#questions tbody tr td a.open').click(function (e) {
    var row = this.parentNode.parentNode; ;
    e.preventDefault();
    if (oTable.fnIsOpen(row)) {
    oTable.fnClose(row);
    } else {
    oTable.fnOpen(row, fnFormatDetails(oTable, row), "question_label_row");
    }
    });

    oTable = $('#questions').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "aoColumns": [
    {
    "bSearchable": false,
    "bVisible": false
    },
    null, null, null, null, null, null
    ]
    });

    });

    Again, your help on this is deeply appreciated.

    _hector
  • girishmrgirishmr Posts: 137Questions: 0Answers: 0
    edited October 2012
    Hope this helps. This is straight from the drill down example but with ajax call placed correctly for the table to render in the right row (TR).

    I tried using toggle - to make it work like accordion, but could not make it work. But that's fair enough that this thing works :)

    NOTE: FYI I have used DT 1.9.3

    [code]

    // Assuming $ function here
    // Click event
    var dTransId = aData[0];
    var dTransStatus = 'Active';
    $('#SummaryTrans td').live( 'click', function () {

    // This is straight from the example - http://www.datatables.net/blog/Drill-down_rows
    var nTr = this.parentNode;
    var i = $.inArray( nTr, anOpen );
    var aData = oTable.fnGetData( nTr );

    // image path
    sImageUrl = "../img/";

    if ( i === -1 ) {
    $('img', this).attr( 'src', sImageUrl+"details_close.png" );

    // A note here that no arguments are passed to fnFormatDetails since I had it covered upfront
    // You can follow the example though

    // Make sure the DOM is created before the data is loaded unlike local data from a dataset which
    // can be stringed while formatting the table markup as shown in the example

    var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(), 'details' );

    // Ajax call to get the data from external data source
    // Using fnCallBack will load the data onto the table formatted below
    $.fn.getDetailTxn(dTransId, dTransStatus);

    // Slide down
    $('div.detailTxn', nDetailsRow).slideDown();
    anOpen.push( nTr );

    }
    else {
    $('img', this).attr( 'src', sImageUrl+"details_open.png" );
    // Slide Up
    $('div.detailTxn', $(nTr).next()[0]).slideUp( function () {
    oTable.fnClose( nTr );
    anOpen.splice( i, 1 );
    } );
    }
    } );

    // display: none
    $('.detailTxn').addClass('invisible');
    [/code]

    Formatting is done here for the table. You might have to do some CSS work to get the inner table spaced correctly

    [code]
    function fnFormatDetails()
    {
    // Get the row data

    sOut =
    '' +
    '' +
    ''+
    '' +
    '' +
    'TxnDtl Id' + // Hide the columns
    'Txn Id' +
    'Account' +
    'Invoice Date' +
    'Invoice Number' +
    'From Date' +
    'To Date' +
    'Amount' +
    'Remarks' +
    'Action' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '';

    return sOut;

    }
    [/code]

    Ajax call to DB with serverside processing
    [code]
    $.fn.getDetailTxn = function (dTransId, dTransStatus) {
    oDetailTable = $("#DetailTrans").dataTable( {
    "sDom": "<'row'<'row'<'span6'>r>t<'row'>",
    "sPaginationType": "bootstrap",
    "bSort": false,
    "bInfo": true,
    "bProcessing": false,
    "bAutoWidth": false,
    "bServerSide": true,
    "bRetrieve": true,
    "bDeferRender": true,
    // Make the first 'id' column invisible for the end user
    "aoColumns":[
    {"bVisible": false},
    {"bVisible": false},
    null,null,null,null,null,null,null
    ],
    "aoColumnDefs": [
    {
    "aTargets":[9],
    "fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
    {
    $(nTd).css('text-align', 'center');
    },
    "mData": null,
    "mRender": function( data, type, full) {
    return '';
    }
    },
    {
    "aTargets":[10],
    "fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
    {
    $(nTd).css('text-align', 'center');
    },
    "mData": null,
    "mRender": function( data, type, full) {
    return '';
    }
    }
    ],

    // Script location
    "sAjaxSource": "../includes/getDetailTxn.php",
    "sServerMethod": "POST",
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
    // console.log('Inside');
    aoData.push( { "name": "detailTransId", "value": dTransId } );
    aoData.push( { "name": "detailTxnStatus", "value": dTransStatus } );
    // console.log(aoData);
    alert(dTransId);
    oSettings.jqXHR = $.ajax( {
    "dataType": 'json',
    "type": "POST",
    "url": sSource,
    "data": aoData,
    beforeSend: function(x) {
    // console.log('Before ajax');
    if(x && x.overrideMimeType) {
    x.overrideMimeType("application/json; charset=UTF-8");
    }
    },
    "success": function (data) {
    if (data['iTotalDisplayRecords'] === 0 ) {
    alert('No Data');
    } else {
    $('#processing').removeClass('alert alert-info').addClass('hide invisible');
    fnCallback(data);
    }
    },
    error: function(xhr, textStatus, status){
    console.log('Detailtxn ' + textStatus);
    }
    } );
    }
    });
    [/code]
This discussion has been closed.