Details row for multiple tables dosen't work!!

XandrUu

Hello,

I'm struggling for 2 days now and I tried lot of options from the web, from the documentation all of them didn't work,
I tried with the old function

 $('table').dataTable();

with fnOpen and fnClose, it dosen't work for multiple tables this is my code:

      $(document).ready(function () {
            var tables = $('.dataTable').dataTable();

            $('.dataTable').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');

                if (tables.fnIsOpen(tr)) {
                    tables.fnClose(tr);
                }
                else {
                    tables.fnOpen(tr,'test','test-class');
                }
            });
        });

I get an error when I try to use tables.fnOpen() like "Cannot read property '0' of undefined"
and from what the debugger can tell me the error came from here:

        this.fnOpen = function( nTr, mHtml, sClass )
        {
            return this.api( true )
                .row( nTr )
                .child( mHtml, sClass )
                .show()
                .child()[0]; // <-- here is the error reporting
        };

from what I could see, the function didn't like the fact that 'this' had multiple tables
keep in mid that this method worked for a single table;

Then I tried to use the method mentioned here using $('table').DataTable() and row.child(), my code for this is:

    /* Formatting function for row details - modify as you need */
    function format ( d ) {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                '<td>Full name:</td>'+
                '<td>'+d.name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension number:</td>'+
                '<td>'+d.extn+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
            '</tr>'+
        '</table>';
    }
     
    $(document).ready(function() {
        var table = $('.dataTable').DataTable( {
            "ajax": "http://localhost:59971/test/objects.html",
            "columns": [
                {
                    "class":          'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "salary" }
            ],
            "order": [[1, 'asc']]
        } );
         
        // Add event listener for opening and closing details
        $('.dataTable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );
    } );

it's exactly the code from examples only I replace the Id selector and added a class selector,
from what I could see in the debugger the variable 'table' has only the last table in memory meaning that the click event will work for the last table, but not for the other above it.

can some one tell me what I'm missing?

Thanks.