Is it possible to select cells in children rows?

jfincanon

I am restricting the cells a user can select to certain columns using selector: 'td:nth-child(n+6):nth-child(-n+11)'

When I expand the children of a row (which has the same format/columns), how can I allow the user to select the cells in those children rows? I would like to apply the same selection restrictions as the parent. I've tried resetting the select.selector on the table and a few other off-the-wall ideas but nothing seems to work. Is this possible?

allan

I presume you are using the Select extension? If so, then no. It will intentionally find and disallow selection of elements which are not part of the host table.

If you wanted to select items in the child row you would need to write some code for that.

Allan

jfincanon

Ok. Thanks for the quick reply Allan. :)

jLinux

@allan - I have a feature on my web app where people can view the active sessions associated to their account, and the activity in the session. I use the Child Rows Example, except for the format function loads a table with a unique ID, which has its rows populated via AJAX, then a new DataTables instance is initiated for that table.

I should be able to use the select extension for that right? The DataTables works perfectly find on the table in the child (Well, it did, something recently broke, or else id just try to add select: true to the DT child rows initiation.

Heres the relevant code

account = {
    details: function () {
        "use strict";

        var $sessions_table = $( '#my-sessions' );
        var $session_activity_dt;

        // Format child rows with session data
        function format_sessions ( data ) {
            console.log('format_sessions called: ', data);

            if( ! data){
                return '<table cellpadding="5" cellspacing="0" border="0"  class="table session-data width-full display compact table-condensed p-t-3">'
                    + '<tr><td>No data!</td></tr></table>';
            }

            var table = '<table cellpadding="5" cellspacing="0" border="0" id="'+data[0].session_id+'" class="table session-data width-full display compact table-condensed p-t-3">' +
                '<thead>' +
                '<tr>' +
                '<th>Timestamp</th>' +
                '<th>Partition</th>' +
                '<th>URI</th>' +
                '<th>Response</th>' +
                '<th>Req Type</th>' +
                '</tr>'+
                '</thead>' +
                '<tbody>';

            $.each(data, function(i,v){
                console.log('Processing Row # '+i+': ', v);
                
                var response_label;

                if(v.http_response.match(/^5/)) {
                    response_label = 'danger';
                } else if(v.http_response.match(/^4/)){
                    response_label = 'warning';
                } else {
                    response_label = 'primary';
                }

                table += '<tr>' +
                '<td>' + v.timestamp + '</td>' +
                '<td>' + v.partition_id + '</td>' +
                '<td>' + v.uri + '</td>' +
                '<td><span class="label label-' + response_label + '">'+v.http_response+'</span></td>' +
                '<td>' + v.request_type + '</td>' +
                '</tr>';
            });


            table += '</tbody></table>';

            return table;
        }

        var $sessions_dt = $sessions_table.DataTable( {
            bInfo: false,
            searching: false,
            paging: false,
            columns: [
                {
                    className:      'details-control',
                    orderable:      false,
                    data:           null,
                    defaultContent: ''
                },
                { data: 'terminate' },
                { data: 'IP' },
                { data: 'date' },
                { data: 'uri' }
            ],
            order: []
        } );

        // Add event listener for opening and closing details
        $sessions_table.find('tbody').on('click', 'td.details-control', function () {
            console.log('Session Details Button Clicked');
            
            var tr = $(this).closest('tr');
            var row = $sessions_dt.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                var $this = $( this );
                var $row = $this.closest( 'tr' );
                var session_id = $row.data( 'row-id' );

                row.child( 'Loading...' ).show();

                tr.addClass('shown');

                $.ajax({
                    type: 'GET',
                    dataType: 'json',
                    url: '/REST/account/session_data/assoc_id/' + session_id + '/format/json',
                    success: function (response) {
                        console.log('Successful AJAX response: ', response);
                        //console.log('Response: ', response);
                        row.child( format_sessions(response.result) ).show();

                        $session_activity_dt = $('#'+session_id).DataTable({
                            searching: false,
                            bInfo: false,
                            scrollY: 300,
                            scrollCollapse: true,
                            paging: false,
                            order: []
                        });
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        var result = $.parseJSON(xhr.responseText);
                        
                        console.log('Failed AJAX response: ', result);

                        template.alert( 'Error retrieving session ID: ', result.error, 'error', true);
                    }
                });
            }
        } );
    }  
};

Also, as you can see, the session table is re-populated every time the row is expanded, so if you wanted to see new data, you would have to close it then expand it. Would you suggest that I use a different method for doing this?

jLinux

Nevermind, got it to work!

http://d.pr/i/LAZl

http://d.pr/i/B7P2

@jfincanon is that anything like what you need?