Show specific column beneath other columns in its own display area (similar to row_details example)?

mihomes

One of my columns is particularly large (lot of text being displayed) and I want to show it in its own row/table/area beneath the other columns. api/row_details.html is what I am looking to do, but without user interaction needed. I want to display this on table draw and always have it displayed. I am using 1.10 and used api/row_details.html as a reference, but I can't seem to do anything based off the code.

I believe I need to be doing the creation of this new display area in "rowCallback" or is there an easier/better way to go about this?

I really don't have anything to show because nothing I have tried comes close to doing anything... help would be appreciated.

mihomes

Trying something like this... definitely not working... keep getting row.child is not a function error.

In the example it uses 'row.child( format(row.data()) ).show();' to open a row, but that is with a click as well.

my callback is :

[code]
"rowCallback": function( row, data, displayIndex ) {
row.child(format(data));
}
[/code]

then I am creating the new display area with this function...

[code]
function format ( d ) {
// `d` is the original data object for the row
return ''+
''+
'Full name:'+
''+d.name+''+
''+
''+
'Extension number:'+
''+d.extn+''+
''+
''+
'Extra info:'+
'And any further details here (images etc)...'+
''+
'';
}

[/code]

mihomes

I'm going to need some help with this one... I must be going about this all wrong. Using server-side and 1.10. I need to display a specific column underneath the rest of the columns in the row similar to how the row_details examples work, but without a click. I just need to do it by default.

mihomes

Scratch all previous comments. I was referencing the examples in 1.10 and those aren't correct. I looked in the actual js and found what I needed.

mihomes

Okay, here is where I am at... I was able to open a new row on click inside the row, however, I do not want to do this on click. Rather, I would like to have the row created and displayed by default. I was thinking the best method to do this would be in "rowCallback":, but I have not been able to get it working inside that callback.

What I am looking to do is have a column displayed in its own row under the 'normal' one.

Ideas? Hints?

This allowed me to create a row and show information on click, but I need it by default.

[code]
$('#sample_1_wrapper').on('click', '.keytest', function () {
var tr = $(this).parents('tr');
var data = dt.fnGetData( tr );
dt.fnOpen( tr, 'test', "info_row" );
});

[/code]

and full code

[code]
dt = $('#sample_1').dataTable({
"dom": "<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-md-12 col-sm-12 text-center'r>><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>><'row'<'col-sm-6'<'#dtLeft'>><'col-sm-6'>>",
"processing": true,
"serverSide": true,
"ajax": "/custom/data-tables/logs-keystrokes.php",
//set columns and rendering
"columns": [
{
"data": "keystroke_id",
"class": "center",
"searchable": false,
"sortable": false,
"render": function ( data ) {
return '';
}
},
{ "data": "computer_username" },
{ "data": "computer_username" },
{ "data": "window_title" },
{
"data": null,
"orderable": false,
"sortable": false,
"defaultContent": 'click me'
},
{ "data": "capture_timestamp" }
],
// set timestamp as initial sorting
"aaSorting": [[5,'desc']],
"drawCallback": function() {
// reset the select/unselect checkbox
$('#sample_1 thead input[type=checkbox]').removeAttr('checked');
// uniform all checkboxes
$('#sample_1 .checkboxes, #sample_1 .group-checkable').uniform();
},
"rowCallback": function( row, data, index ) {
if ( $.inArray((data.DT_RowId).toString(), selected) !== -1 ) {

$(row).addClass('active');

var checkbox = $(row).find('.checkboxes');
$(checkbox).attr("checked", true);
}
}
});

//details formatting
function format ( d ) {
return 'Keystrokes: '+d.keystrokes;
}

$('#sample_1_wrapper').on('click', '.keytest', function () {
var tr = $(this).parents('tr');
var data = dt.fnGetData( tr );
dt.fnOpen( tr, format(data), "info_row" );
});

[/code]

allan

Do it in drawCallback I'd say. Just loop over all rows that are displayed, if they are not open, then open them :-). Should happen fast enough that the user won't see it happening. No need for click events if you don't want them.

Allan

mihomes

I was able to get it working. I do have another question though... I was under the assumption that 'classname' in the fnOpen would be the class applied to the newly created tr. Instead, it is the class applied to the td within the new tr. Is that the way it is supposed to work?

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

dt.fnOpen( tr, format(data), "classname");
});
[/code]

allan

Yeah :-(. Its a bit bizarre I know. Made a mistake in doing it that way originally, and would be breaking the API if I changed it now...

Allan

mihomes

Ok... any tips on being able to add a class to that tr then? All I can think of is apply the td class (unique to these rows) with fnopen and then apply the class I want to the parent tr.