How to use Row Details functionalty with two grid tables
How to use Row Details functionalty with two grid tables
notyou61
Posts: 21Questions: 8Answers: 0
I have more than one table grid on a page and would like to use the "Row Details" functionality with them. Each grid will be using a separate Ajax call to populate them and therefore the row details will need to provide distinct data for each. I am not able to see how this might be done from the examples provided. My code is as follows:
// Editor Variable
var editor; // use a global for the submit and return data rendering in the examples
// Grid Variables
var employeesTable, actionTable, customersTable;
// Array to track the ids of the details displayed rows
var detailRows = [];
var detailRows1 = [];
// Child Row Test
/* Formatting function for row details - modify as you need */
function format (d){
// `d` is the original data object for the row
return '<table width=100% cellpadding="0" cellspacing="0" border="0">' +
'<tr><strong>Record Details:</strong>' +
'<td width=05%>' +
'<td width=95%>' +
'<table width="100%" cellpadding="5" cellspacing="0" border="1">' +
'<tr>' +
'<td width="20%">User Birthday:</td>' +
'<td width="80%">' + d.userBirthday + '</td>' +
'</tr>' +
'<tr>' +
'<td>User Since:</td>' +
'<td>' + d.userSince + '</td>' +
'</tr>' +
'<tr>' +
'<td>Action ID Address:</td>' +
'<td>' + d.actionIPAddress + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>' +
'</tr>' +
'</table>' +
'</td>' +
'</td>' +
'</tr>' +
'</table>';
}
// Document Ready
$(document).ready(function(){
// Employee Datagrid
employeesTable = $('#tblEmployees').DataTable({
// Grid Options
dom: "Tfrtip",
lengthChange: false,
bAutoWidth: false,
bProcessing: true,
order: [ 1, 'asc' ],
// Ajax
ajax: {
url: "dataGridQuery.php?gridNumber=1",
type: 'POST',
dataType: 'json'
},
// Columns
columns: [
// Employee Details
{
title: "Details",
class: 'details-control',
orderable: false,
data: null,
defaultContent: '',
width: "05%"
},
// User ID
{
title: "ID",
data: null,
render: function (data, type, row)
{
// Format User ID
return formatPrimaryKeyNumber(data.userID, 3, 'USR');
},
width: "10%"
},
// Employee Name
{
title: "Employee",
data: null, render: function (data, type, row)
{
// Combine the first and last names into a single table field
return data.userHonorific + ' ' + data.userFirstName + ' ' + data.userLastName;
},
width: "30%"
},
// Employee Last Action (Sample data, needs to be corrected)
{
title: "Last Action",
data: null,
render: function (data, type, row)
{
// Format User Action
return obtainUserLastAction(data.userID);
},
width: "55%"
}
],
// Grid Buttons
tableTools: {
// Row
sRowSelect: "os",
// Buttons
aButtons: [
// Edit Buttons
{ sExtends: "editor_create", "sToolTip": "Click here to create a new record.", editor: editor },
{ sExtends: "editor_edit", "sToolTip": "Click here to edit a record.", editor: editor },
{ sExtends: "editor_remove", "sToolTip": "Click here to delete a record.", editor: editor },
// Custom Button
{
sExtends: "ajax",
sButtonText: "Custom Button",
sToolTip: "This is a custom button.",
fnClick: function ( nButton, oConfig, oFlash ) {
alert( 'Mouse click' );
}
}
]
}
});
// Employee Table Details
$('#tblEmployees tbody').on( 'click', 'tr td:first-child', function () {
var tr = $(this).parents('tr');
var row = employeesTable.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
});
// Employee Table Detail Rows array
employeesTable.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td:first-child').trigger( 'click' );
} );
});
// Actions Datagrid
actionTable = $('#tblActions').DataTable({
// Grid Options
dom: "Tfrtip",
lengthChange: false,
bAutoWidth: false,
jQueryUI: true,
// Grid Ajax
ajax: {
// URL
url: "dataGridQuery.php",
// Ajax Parameters (Must use the "get")
data: {
gridNumber:2,
varTodaysActions: "y"
},
// Ajax Type
type: 'GET',
// Data Type
dataType: 'json'
},
// Grid Columns
columns: [
// Action Details
{
title: "Details",
class: 'details-control',
orderable: false,
data: null,
defaultContent: '',
width: "05%"
},
// Action ID
{
title: "Action ID",
data: "tblActions.actionID",
render: function (data, type, row)
{ // Format Primary Key
return formatPrimaryKeyNumber(row.tblActions.actionID, 5, 'ACT');
},
width: "15%"
},
// Action Time
{ title: "Action Time",
data: "tblActions.actionTime",
render: function ( data, type, row ){
// Formatted Action Time
return moment.unix(row.tblActions.actionTime).format("MMMM Do YYYY, h:mm:ss a");
},
width: "35%"
},
// Action Taken
{
title: "Action Taken",
data: "tblActions.actionTaken",
width: "25%"
},
// User Name
{ title: "User",
data: null,
render: function ( data, type, row ){
// Combine the first and last names into a single table field
return data.tblUsers.userHonorific + ' ' + data.tblUsers.userFirstName + ' ' + data.tblUsers.userLastName;
},
width: "20%"
}
],
// Grid Buttons
tableTools: {
sRowSelect: "os",
aButtons: []
}
});
// Action Table Details
$('#tblActions tbody').on( 'click', 'td.details-control', function () {
var tr = $(this).parents('tr');
var row = actionTable.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows1 );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows1.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows1.push( tr.attr('id') );
}
}
});
// Action Table Detail Rows array
actionTable.on( 'draw', function () {
$.each( detailRows1, function ( i, id ) {
$('#'+id+' td:td.details-control').trigger( 'click' );
} );
});
My guess is that the problem involves modifying the "format (d)" function however I am unable to determine how that would be done.
Thanks for any help in this regard,
Steve
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi Steve,
Is the problem that you need the
format()function to operate differently for the two different tables? If so, I'd suggest just splitting it out into two separate functions.Allan
Thanks Allan, works great!
Is there any way to to modify format() function to make it more flexibility to operate on a lot of tables?
it means: how to change object call d.table1.note to d.(some variable).note.
Something similar to table propertis:
Sure - the
dvariable is just the raw data object for the row in question. So if you row's data has atable1.noteobject and property, you would just do exactly as you have.Allan
I spend a lot of time and can't do it. When I try:
I received:
instead of data. Is there a mistake in my chain?