Problem with multi table initialization

DonSolo

My HTML page has multiple tables. I wish to show all the child rows for each table on page load.
Here's my JavaScript:

    Sys.Application.add_load(function () {

        var data = $('table.datatables').DataTable({
            fixedHeader: {
                footer: true,
                header: true,
                headerOffset: 60
            },
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            retrieve: true
        });

        data.rows().every(function (rowIdx, tableLoop, rowLoop) {
            //? this context always refers to a row in the first table (0), even when tableLoop equals 1
            if (!this.child.isShown()) {
                var tr = $(this.node());
                var note = tr.data().childNote;
                if (note != null && note.length > 0) {
                    this.child(note).show();
                    this.child().addClass(tr.attr('class'));
                }
            }
        });

    });

My HTML page has multiple tables and the data-child-note attribute is set for some rows.
The first table displays correctly. However, subsequent tables shows child notes from the first table.
Examination of the raw HTML shows the notes in the correct data-child-note attributes.

Therefore, when debugging this script, this is what I discovered.
The every function does iterate over every row in every table and tableLoop and rowLoop does increment as expected.
However, the this context of the called function always refers to a row in table(0), even when tableLoop is greater than 0.
As a result, the child rows for subsequent tables show the child rows from the first table and not from the current table.

This seems like a defect.

As a workaround, can someone suggest how can I use the tableLoop and rowLoop values to obtain the correct row?

Thank you,

DonSolo

There is a defect in the datatables script, starting at line 9422.
// Add the 'every()' method for rows, columns and cells in a compact form

Original script:

$.each( [ 'column', 'row', 'cell' ], function ( i, type ) {
    _api_register( type+'s().every()', function ( fn ) {
        var opts = this.selector.opts;
        var api = this;

        return this.iterator( type, function ( settings, arg1, arg2, arg3, arg4 ) {
            // Rows and columns:
            //  arg1 - index
            //  arg2 - table counter
            //  arg3 - loop counter
            //  arg4 - undefined
            // Cells:
            //  arg1 - row index
            //  arg2 - column index
            //  arg3 - table counter
            //  arg4 - loop counter
            fn.call(
                api[ type ](
                    arg1,
                    type==='cell' ? arg2 : opts,
                    type==='cell' ? opts : undefined
                ),
                arg1, arg2, arg3, arg4
            );
        } );
    } );
} );

Notice the function call (line 18 of sample) does not make use of the table counter parameter, hence the default to table 0.

This revised script fixes the problem:

$.each( [ 'column', 'row', 'cell' ], function ( i, type ) {
    _api_register( type+'s().every()', function ( fn ) {
        var opts = this.selector.opts;
        var api = this;

        return this.iterator( type, function ( settings, arg1, arg2, arg3, arg4 ) {
            // Rows and columns:
            //  arg1 - index
            //  arg2 - table counter
            //  arg3 - loop counter
            //  arg4 - undefined
            // Cells:
            //  arg1 - row index
            //  arg2 - column index
            //  arg3 - table counter
            //  arg4 - loop counter
            fn.call(
                api.table(type==='cell' ? arg3 : arg2)[ type ](
                    arg1,
                    type==='cell' ? arg2 : opts,
                    type==='cell' ? opts : undefined
                ),
                arg1, arg2, arg3, arg4
            );
        } );
    } );
} );

Hopefully the powers that be will pick this up and incorporate into the downloadable version.

colin

Hi @DonSolo ,

You need to use the tables() to get to the specific table for those API calls - something like this.

Cheers,

Colin

colin

Sorry, I forgot the link. Here it is: http://live.datatables.net/kewiyafa/1/edit