Master Detail 2 table filter

Nathaniel@Frontline-energy.com

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:

1. Either copying / pasting the UUID from the Table1 highlighted row into the Table2 search box
2. Select statement = SELECT [.....] FROM Table2 WHERE Table2.UUID = Table1.UUID
3. Alternatives?
4. 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' );
        } );
    } );

    
} );

allan

Hi - I've reformatted your post a little. The posts are formatted using Markdown as noted just below the "Ask Question" button :-)

Regarding your question - I'm not entirely sure I understand I'm afraid, specifically how the master / detail fits into it, but for this part:

How, from the selected highlight row can a trigger be set to filter Table2 based on Table1 highlighted row when clicked

You would probably use something like:

$('#example').on( 'click', 'tbody tr', function () {
  var data = table.row( this ).data();

  dt.ajax.url( 'scripts/cb2.php?search='+data.searchTerm ).reload();
} );

i.e. searchTerm (which you would update to be whatever you want from the master table) would be sent as a GET parameter to the server, and reload table 2, whenever a row is clicked on in table 1.

Is that what you are looking for?

Allan

Nathaniel@Frontline-energy.com

Allan thanks for your response! Still trying to implement the snippet.

For declaring the searchTerm

var searchTerm =

I would be referencing Table1.

{ "data": "P_CENTROID" }

Understanding that var data = table.row( this ).data(); captures the row's data,

How do I assign the searchTerm variable to take the P_CENTROID from captured row in Table1, utilize the GET procedure for Table2 to look in a specific column in Table2 to bring back related search entry based off Table1 P_CENTROID.

Note: Table1 and Table2 are on the same page

Example

If a User selects a row ID = 0 from Table1 and it looks like this

ID | P_CENTROID| ADDRESS | CITY | ZIP

01| 1234122222 | A Street | Pea | 99999

Am I looking at something like this?

var data = table.row( this ).data();
var searchTerm = '+table.PT_CENTROID+';
 
dt.ajax.url( 'scripts/cb2?search=.php'+data.searchTerm ).reload();

Also I have manually tried the 'scripts/cb2.php?search=' assigning a known variable and Table2 does not reload. Do I need to use a fnDraw?

Thanks so much!

allan

How do I assign the searchTerm variable to take the P_CENTROID from captured row in Table1

data.P_CENTROID I would think. Assuming that P_CENTROID is a property in the object.

Allan

Nathaniel@Frontline-energy.com

Allan,

Thanks for the help!

Unfortunately it does not work, the second table is not filtering or redrawing.

Does this not work when both tables are on the same page?

Not sure what to do, I'll keep plugging away.

allan

Can you link me to the page so I can take a look?

Allan