Drill-Down Rows w/ Static Content

hecsan07

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

allan

> 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

hecsan07

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

hecsan07

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

allan

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

hecsan07

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

girishmr

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]