Background:
2 tables, Table1 =Master Table2 = Detail / Both Server-side processing, using 1.10
Action:
User filters through Table1, finds row and highlights row.
Ask:
How, from the selected highlight row can a trigger be set to filter Table2 based on Table1 highlighted row when clicked. (Master / Detail)
By:
- Either copying / pasting the UUID from the Table1 highlighted row into the Table2 search box
- Select statement = SELECT [.....] FROM Table2 WHERE Table2.UUID = Table1.UUID
- Alternatives?
- Examples would rock!
Cheers!
P.S. Be kind this is my first post, let me know how to format for the future!
Code(JS):
//--Used for second table child rows----//
function format ( d ) {
return '<table>'+
'<tr>'+
'<td><b>Research Status:</b></td>'+
'<td> '+d.R_STATUS+' </td>'+
'</tr>'+
'<tr>'+
'<td><b>Notification Status:</b></td>'+
'<td> '+d.N_STATUS+' </td>'+
'<td><b>Notification Date:</b></td>'+
'<td> '+d.N_DATE+' </td>'+
'</tr>'+
'<tr>'+
'<td><b>Assigned Status:</b></td>'+
'<td> '+d.A_STATUS+' </td>'+
'<td><b>Assigned Date:<b></td>'+
'<td> '+d.A_DATE+' </td>'+
'</tr>'+
'<tr>'+
'<td><b>Inspection Crew:</b></td>'+
'<td>' +d.A_CONTR+' </td>'+
'<td></td>'+
'<td></td>'+
'</tr>'+
'<tr>'+
'<td><b>First Inspection:</b></td>'+
'<td> '+d.First_Inspection+' </td>'+
'<td><b>Last Inspection:<b></td>'+
'<td> '+d.Last_Inspection+' </td>'+
'</tr>'+
'</table>';
}
//-------------------------------------------------------//
//---Table1 population---//
$(document).ready(function() {
var table = $('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/cb.php",
"displayLength": 5,
"columns": [
{ "data": "4" },
{ "data": "1" },
{ "data": "2" },
{ "data": "3" }
]
} );
//---Table 1 Selection Highlight---//
$('#example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
//-------------------------------------------------------//
//---Table2 Population---//
var dt = $('#example2').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/cb2.php",
"displayLength": 5,
"dom": 'fti',
"columns": [
{
"class": 'details-control',
"data": null,
"defaultContent":''
},
{"data":"0"},
{"data":"1"},
{"data":"2"},
{"data":"3"},
{"data":"4"},
{"data":"13"}
]
} );
//---Table2 Child Rows Function---//
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#example2 tbody').on( 'click', 'tr td:first-child', function () {
var tr = $(this).closest('tr');
var row = dt.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') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td:first-child').trigger( 'click' );
} );
} );
} );