Quantcast
Channel: DataTables 1.10 — DataTables forums
Viewing all articles
Browse latest Browse all 2364

Master Detail 2 table filter

$
0
0

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' );
        } );
    } );

    
} );

Viewing all articles
Browse latest Browse all 2364

Trending Articles