DataTables

Hey Allan, first off thank you for the time and support that you put into this plugin! My donation is on its way.

I have modified this slightly to remove the td image and changed it to activate the details div based upon clicking anywhere on the row, below is my working code

<code>
$('#example tbody tr').live( 'click', function () {

var nTr = this;
var i = $.inArray( nTr, anOpen );

if ( i === -1 ) {
$(this).addClass('row_selected');
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
}
else {
$(this).removeClass('row_selected');
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );

}
} );
</code>

I have added a row_selected class to the <tr> so that I can change the open row's color. I have seen this question about row opening asked on many other forum posts so hopefully this can help others.

One issue I have been having is I would like to only have one row "open" at a time. This is because I am using a form to post php to mysql inside my details div and with multiple rows open I have similar DOM elements that cause me problems with the form submission. I know I could probably dynamically generate the form id's so they would be able to be identified separately in the DOM but this is not needed for my implementation.

Could I get an example of how I would check the anOpen array and just close all rows before opening a new one? I assume I could just add this as the first command in the open row check so that I would only have one details form in the DOM at one time. Thanks again for your help!

Mike

What if a details row is opened (using the above code) and the user navigates to the next page of the table, then opens a new details row. The one on the previous page will still remain open - is it because you're closing the details row with a simulated click?

I'm integrating this into http://www.modeltraintracker.com/sandbox/test_item.php but am having the following issue:
If you click the expansion td to expand info out, the "edit" and "delete" buttons are enabled, as they should be. If you click on another row's expansion td, the old row collapses, the new row expands, but the "edit" for the new row is not enabled. It would appear that the "click" listener, being a "live" event, is handled serially, and the old row is collapsed after the new row expanded, thus disabling the edit button. What is the best way around this?

Edit: here's my code:

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

			$(anOpen).each( function () {
				if ( this !== nTr ) {
					$('td.control', this).click();
				}
			} );
			
			if ( i === -1 ) {
				$('img', this).attr( 'src', sImageUrl+"details_close.png" );
				$('div.innerDetails', nDetailsRow).slideDown();
				var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
				anOpen.push( nTr );
				$(nTr).addClass('row_selected');
				clickedRowId = $(nTr).attr('id');
				$('#btnEditRow').button( "option", "disabled", false );
			} else {
				$('img', this).attr( 'src', sImageUrl+"details_open.png" );
				$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
					$(nTr).removeClass('row_selected');
					clickedRowId = 0;
					oTable.fnClose( nTr );
					anOpen.splice( i, 1 );
					$('#btnEditRow').button( "option", "disabled", true );
				  } );
			}
			return false;
		} );

I'm following the code in the blog and would like to know how to obtain a value of a column in the row that was just clicked to reveal the details. What I have is an ID in the second column (immediately to the right of the '+' image. I'd like to have the value of that id so that I can then pull relevant data for that entity to be displayed in the details row.

I've tried:

var aData = oTable.fnGetData( nTr );
var id = aData[1];

but that didn't work. id is always 'undefined'.

Thanks in advance.

I wonder if in these cases the solution would not be of interest to others...

Hi, I am not able to show the detail view. I had a link saying View Details instead of a Image.

I have a datatable which has JSON data, I added a link to see the details. When I am clicking on the link, nothing happening.

Thanks,

Below is my code:

[code]
<script type="text/javascript">

var dataTable;
$(function () {

$("#GetUserBtn").click(function (e) {
e.preventDefault();
var postUrl = $("#UserInfo").attr("action");
var roleCode = $("#RoleCode").val();

if (roleCode.length <= 0) {
$(".roleValidation").show();
return false;
}
else {
$(".roleValidation").hide();
$.post(postUrl, { "roleCode": roleCode }, function (data) {

var userData = data.Data != null ? data.Data : [];

dataTable = $('#usersTable').dataTable({
"bJQueryUI": true,
"aaData": userData,
"oLanguage": {
"sZeroRecords": "No Records Found"
},
"bDestroy": true,
"aoColumns": [{ "sTitle": "Full Name", "mDataProp": "FullName" }, { "sTitle": "UserName", "mDataProp": "UserName" }, { "sTitle": "Email", "mDataProp": "Email" }, { "sTitle": "Role", "mDataProp": "RoleName" }, { "sTitle": "View Details", "mDataProp": null, "sDefaultContent": '<a href="#">View Details</a>'}]

});

});
return false;
}
});
});

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

if (i == -1) {
//$('a', this).attr( 'src', sImageUrl+"details_close.png" );
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
anOpen.push(nTr);
}
else {
//$('img', this).attr( 'src', sImageUrl+"details_open.png" );
oTable.fnClose(nTr);
anOpen.splice(i, 1);
}
});

function fnFormatDetails(oTable, nTr) {
var oData = oTable.fnGetData(nTr);
var sOut =
'<div class="innerDetails">' +
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr><td>Full Name:</td><td>' + oData.FullName + '</td></tr>' +
'<tr><td>UserName:</td><td>' + oData.UserName + '</td></tr>' +
'<tr><td>Email:</td><td>' + oData.Email + '</td></tr>' +
'</table>' +
'</div>';
return sOut;
}
</script>
}


</script>

Hi Allan, great job. I'm new here and I've been able to successfully implement a drill down dataTable. However, I have a challenge...how can I close and slide up a row from within the drill down? I have added a button within the drill down, but I'm not sure how to make sure I close the exact row I'm on. Can you help? Thanks.

Thanks for the reply Allan. Appreciated.

I'm building a drill-down dataTable from an Ajax source, and am having trouble implementing a custom row filter on top of it. The general filter works fine, but I can't make the custom filter code work in conjunction with the code that populates and scrolls up/down for the inner table. Can you provide any help? Basically I'd like to figure out how to build a range filter and/or a pull-down filter based on the data within a certain column. Thanks in advance!

found it somewhere. sorry, don't remember where it was but here's the code to load an external url into a tab.

replace the:

oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
with this:

$.get("/ajax/load_user.php?user_id=" + aData[1], function (response) {
oTable.fnOpen(nTr, response.details, 'details');
});

and I return a JSON encoded array from /ajax/load_user.php?user_id=" + aData[1] using php like this:

$data = array();
$data['details'] = "<h1>hello world</h1>";

return json_encode($data);

Hope this helps!

I'm looking for help with this here if anyone can spare a few minutes please?

http://www.datatables.net/forums/discussion/9255/help-with-drill-down-rows/p1

Thanks

Yes - what you would need to do is run a Javascript function over your table before initialising DataTables, reading your details rows, attaching them to their parents as a property (so there is a relationship between then) and then removing the details rows from the DOM. Then initialise DataTables and when you need to show a details row, just put the row you previous removed back in :-)

Allan

Thanks for great plugin Allen. I need to implement a drill down data table within the drill down data table. Hope you understood my question. Is that possible to expand the rows in inner table ? Thanks.

Allen,
Do you know if anyone has successfully done a "expand/collapse all" for Drill-Downs?
I've tried, and while it opens/expands just fine, it doesn't close/collapse past the first entry.
Most likely my code on how I'm doing it, below is the code for it.

	$("#expandAllTR").click(function (){
		$("#parentTable tbody 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, info, "info_row" );
			}
		});
		if($("#expandAllTR").html()=="Expand All"){
			$("#expandAllTR").html("Collapse All");
		}else{
			$("#expandAllTR").html("Expand All");
		}
	});

Hi Allan,

I am showing one row details at a time. Is there any way to pass DOM element (not string) as the content of the details.
I have a hidden form in my page which I want to append (not clone) as the 'innerDetails'.

Is there anyway to keep the expanded row after calling a fnDraw to refresh the JSON data?

@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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData("Title")</title>
    <link href="@Url.Content("~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css")" rel="stylesheet" type="text/css" />
    <!--<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
    <link href="@Url.Content("~/Content/DataTables-1.9.4/media/css/demo_table.css")" rel="stylesheet" type="text/css" />


    <script src="@Url.Content("~/Scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js")" type="text/javascript"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

//view page

@ModelType MVC3Test.BatchCollection

@Code
    ViewData("Title") = "Batchlist2"
End Code

<h2>Batchlist2</h2>

<table id="batch_table" class="display">
    <thead>
        <tr>
            <th></th>
            <th>BatchID</th>
            <th>Transmitted Date/Time</th>
            <th>Completed Date/Time</th>
            <th>Created By</th>
            <th>Created Date/Time</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script type="text/javascript" language="javascript">

    // 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": '<img src="' + sImageURL + 'details_open.png' + '">'
                                                    },
                                                    { "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 = '<div class="innerDetails">' +
                            '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                                '<tr>' +
                                    '<td>TransactionID:</td><td>' + tranData.ID + '</td>' +
                                    '<td>SOR_ID:</td><td>' + tranData.SystemOfRecordID + '</td>' +
                                    '<td>PostingFlag:</td><td>' + tranData.PostingFlag + '</td>' +
                                    '<td>Posting_DTTM:</td><td>' + tranData.Posting_DTTM + '</td>' +
                                    '<td>PostingMessage:</td><td>' + tranData.PostingMessage + '</td>' +
                                    '<td>PostingMessage:</td><td>' + tranData.XMLTransactionData + '</td>' +
                                '</tr>' +
                            '</table>' +
                       '</div>'; 
            return sOut;
        }
    }

</script>

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.

Just wanted to add something to this, it also works in IE9 and above. It is only an issue with IE8/7

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

    	    $('#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 =
    	    	    '<div class="innerDetails">'+
    	    	    '<script type="text/javascript">' +
    	    	    '$("#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" }'+
        	    	']'+
    	    	    '});' +
    	    	    '</' +
    	    	    'script>' +
    	    	      '<table id="tableDetails'+fundNum.trim()+'" class="display" cellpadding="0" cellspacing="0" border="0">'+
    	    	      	'<tbody>';
    	    	     if(detailsTableData.length > 0 )
    	    	     { 
        	    	     for(var i=0;i<detailsTableData.length;i++)
        	    	     { 
            	    	     if(detailsTableData[i][0] ===  fundNum )
            	    	     {         
    	    	    	 		sOut +='<tr>'+
    	    	        		'<td>'+detailsTableData[i][1]+'</td>'+
    	    	        		'<td>'+detailsTableData[i][2]+'</td>'+
    	    	        		'<td>'+detailsTableData[i][3]+'</td>'+
    	    	        		'<td>'+detailsTableData[i][4]+'</td>'+
    	    	        		'<td>'+detailsTableData[i][5]+'</td>'+
    	    	        		'</tr>';
            	    	     }
        	    	     }
        	    	    sOut += '</tbody><tfoot>' +
        	    	    		'<tr>' +
		    					'<th></th>' +
		      					'<th></th>' +
		      					'<th></th>' +
		      					'<th></th>' +
		      					'<th></th>' +
		    					'</tr>' +
		  						'</tfoot>'; 
    	    	     	sOut += '</table>'+
    	    	    		 '</div>';
    	    	     }  
    	    	  return sOut;
    	    	}