What is wrong with this table format?

zauhar

Is there anything wrong with the following table markup, which is generating a exception 'Uncaught TypeError: Cannot read property 'mData' of undefined', specifically var col = oSettings.aoColumns[i]; is null at line 6404 in the latest debugging code).

Markup:

Job IDMoleculeSignatureMax %Q UnusedMax %T UnusedSubmitted Job IDMoleculeSignatureMax %Q UnusedMax %T UnusedSubmitted

2VJyLb0n	ZINC08918116	1DHISTO	0	0	2015-04-06T16:01:32.000Z
bcpfcGlJ	ZINC08918116	1DHISTO	0	0	2015-04-06T16:18:39.000Z
F4T5huFp	ZINC08918116	1DHISTO	0	0	2015-04-06T16:16:11.000Z
KMPL5Oot	ZINC08918116	1DHISTO	0	0	2015-04-06T16:22:07.000Z
OaOLqxrk	ZINC08918116	1DHISTO	0	0	2015-04-06T16:26:36.000Z
WCy5PB6p	ZINC08918116	1DHISTO	0	0	2015-04-06T16:20:35.000Z

And dataTables is called like this:
$('#runningtable').dataTable( {
"bDestroy": true,
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
} );

I have also tried it without any argument to dataTable, with the same result. The table looks fine if I don't call dataTables, although without scrolling, etc, which is the reason I want to use dataTables.

I am a newcomer to this plugin, any assistance is appreciated.

Randy

zauhar

Sorry I neglected to use the code snipped thingies for the table markup:

<table id="runningtable" class="display dataTable" cellspacing="0">
                    <thead id="runningtableheader"><th>Job ID</th><th>Molecule</th><th>Signature</th><th>Max %Q Unused</th><th>Max %T Unused</th><th>Submitted</th></thead>
                    <tbody id="runningtablebody">
                    <tr id="2VJyLb0n_report"><td>2VJyLb0n</td><td>ZINC08918116</td><td>1DHISTO</td><td>0</td><td>0</td><td>2015-04-06T16:01:32.000Z</td></tr>
                    <tr id="bcpfcGlJ_report"><td>bcpfcGlJ</td><td>ZINC08918116</td><td>1DHISTO</td><td>0</td><td>0</td><td>2015-04-06T16:18:39.000Z</td></tr>
                    <tr id="F4T5huFp_report"><td>F4T5huFp</td><td>ZINC08918116</td><td>1DHISTO</td><td>0</td><td>0</td><td>2015-04-06T16:16:11.000Z</td></tr>
                    <tr id="KMPL5Oot_report"><td>KMPL5Oot</td><td>ZINC08918116</td><td>1DHISTO</td><td>0</td><td>0</td><td>2015-04-06T16:22:07.000Z</td></tr>
                    <tr id="OaOLqxrk_report"><td>OaOLqxrk</td><td>ZINC08918116</td><td>1DHISTO</td><td>0</td><td>0</td><td>2015-04-06T16:26:36.000Z</td></tr>
                    <tr id="WCy5PB6p_report"><td>WCy5PB6p</td><td>ZINC08918116</td><td>1DHISTO</td><td>0</td><td>0</td><td>2015-04-06T16:20:35.000Z</td></tr>
                    </tbody>
                    <tfoot id="runningtablefooter"><th>Job ID</th><th>Molecule</th><th>Signature</th><th>Max %Q Unused</th><th>Max %T Unused</th><th>Submitted</th></tfoot>
                </table>

mkleinosky

what js code are you using to call datatables?

tangerine

$('#runningtable').dataTable( { "bDestroy": true,

I don't understand your use of "bDestroy" there. (But I'm no expert...)

mkleinosky

I created page: http://mosttraveledpeople.com/testdt1.php

and get your table with no errors, maybe the included scripts and css are not the same?

zauhar

Huhm - I linked to the latest Tables code, but maybe the CSS is out of date - I will check.

By the way, 'bdestroy' is in their because the table is dynamically rebuilt periodically, and my understanding was that you need bdestroy to reset things before a rebuild - maybe I misunderstood?

Thanks!!

Randy

zauhar

Guys, been banging my head on this on and off since yesterday - I can copy a snapshot of the table into test code, following mkleinosky, and it does work. I have checked in my live page to make sure I have corresponding versions of the javascript and css.

The error happens here, at line 6403:

                $.each( _fnGetRowElements( oSettings, rowOne[0] ).cells, function (i, cell) {
                    var col = oSettings.aoColumns[i];
            
                    if ( col.mData === i ) {

The oSettings.aoColumns list has no elements, so col is undefined and then the exception is triggered. I am trying to pick my way through this, but would appreciate if any of you can recognize where I should be concentrating. I would post more code, but this is a node app that is using a socket to get data to update the table, so I would pretty much have to do what mkleinosky kindly did, and that does not trap the problem.

allan

@zauhar - Can you link to the page you are having problems with so it can be debugged please.

Allan

zauhar

Sorry Allan, the server is not yet visible outside our firewall.
I am stepping through it, I will post what I find.

Randy

allan

The most likely issue is that columns * rows == cells is not true. Which is must be for DataTables to operate.

zauhar

Allan, indeed - I had neglected to wrap my <th> elements in a <tr></tr>, and stepping through the code I saw that the columns were built by looking for children of a <tr> element. So, no columns were built.

Weirdly, with that omission everything seems to work perfectly in the test code that I made following mkleinosky! - so that is perplexing. But I do not feel like stepping through any more code. ;-(

In my original design I followed each job with a row that spanned the whole table and held a progress bar - I guess that will not work? Looks like you cannot handle colspan?

Thanks!

Randy

tangerine

DataTables can handle colspan.

http://datatables.net/examples/basic_init/complex_header.html

zauhar

Tangerine, I saw that, but it looks to me like this is limited to complex headers, not the content of the table. I just experimented with putting my bootstrap progress bars back in - the structure is that every job is represented by a pair of rows, the first has six data items that display job parameters, the second holds a progress bar that spans the entire width of the table.

The progress bars appear, but they are in the wrong order! Most are grouped at the start of the table, one appears at the bottom. Is there any way to address that?
Thanks!

zauhar

Update - I just confirmed that dataTables is indeed reordering the rows - I start with job descriptions and progress bars alternating, but once dataTables does its magic the progress bars are moved to the top!

I can change the design, maybe pack two divs into one row, the first with job parameters, the second with the progress bar -

allan

That is correct - colspan is not supported in the tbody (nor is rowspan).

You could use child rows (row().child()) to show a progress bar for every row.

It owuld be useful if we could see a picture of what you want to achieve.

Allan

zauhar

Allan, that sounds like what I need to do. I am trying to follow the example at http://datatables.net/reference/api/row().child() - the only problem is, I need the ID of each parent row to construct the child (the child is a bootstrap progress bar, and I need to assign it the correct ID so that I can dynamically update it).

But I am doing this totally wrong - this is the sort of thing I am trying to do, which does not work:

                                        var theTable = $('#runningtable').DataTable( {
                                                "scrollY":        "200px",
                                                "scrollCollapse": true,
                                                "paging":         false
                                            } );
                    theRows = theTable.rows() ;
        
                    for( var j in theRows )
                        {
                            var row = theRows[j] ;
                            var id = $(row).attr('id') ;
                            row.child( $( childRows[id] ) ).show();
                        }

Here childRows maps the parent row ID to the text that defines a <tr> holding the progress indicator. How can I get the table row as a jquery object?

Thanks!
Randy

allan

Use rows().node() to get the nodes. Your theRows variable currently stores a DataTables API index of nodes.

Allan

zauhar

Allan, I am so close, but have one remaining issue. This code happily adds the progress bars:

                                       var theTable = $('#runningtable').DataTable( {
                                                                                                "scrollY":        "200px",
                                                                                                "scrollCollapse": true,
                                                                                                "paging":         false
                                                                                        } );
                                        for( id in childRows )
                                                {
                                                        theTable.row('#' + id).child( $(childRows[id])).show() ;
                                                }

That runs when the table is first built. However, it can happen that a job is added after the table is first built, and I run the following code to add a progress bar after the table has been updated. This involves checking each row ID, and if the child is missing (the case for the newly-added job) the progress bar is added:

                                       var theTable = $('#runningtable').DataTable( {
                                                                                        } );
                                        for( id in childRows )
                                                {
                                                        var row = theTable.row('#' + id) ;
                                                        if(   row.child() === undefined  )
                                                                {
                                                                        theTable.row('#' + id).child( $(childRows[id])).show() ;
                                                                }
                                                }

This runs fine - the operation of adding the child takes place for the one newly-added row. However, the progress bar does not show up in the table, just the job description. Any idea why that would be?

Thanks for your help,
Randy

zauhar

Allan, may have answered my own question, it looks like I need to do a .draw() after updating the table.