Multiple instances of DataTables : TypeError: e[j] is undefined

1DMF

I don't understand why DataTables is throwing this error in FF: TypeError: e[j] is undefined

In IE it's reported as : Unable to get property 'aDataSort' of undefined or null reference

Here is the code

HTML

<table id="fp_promotion_history">
<thead>
    <tr>
        <th>AuditID</th>
        <th>Action</th>
        <th>Description</th>
        <th>User Name</th>
        <th>Audit Date</th>
    </tr>
</thead>
<tbody>
    <tmpl_loop name='fp_history'>
        <tr id="AuditID_<tmpl_var name='AuditID'>">
            <td data-AuditID="<tmpl_var name='AuditID'>"><tmpl_var name='AuditID'></td>  
            <td data-Action="<tmpl_var name='Action'>"><tmpl_var name='Action'></td>
            <td data-Audit_Desc="<tmpl_var name='Audit_Desc'>"><tmpl_var name='Audit_Desc'></td>
            <td data-User_Name="<tmpl_var name='User_Name'>"><tmpl_var name='User_Name'></td>               
            <td data-Audit_Date="<tmpl_var name='Audit_Date'>"><tmpl_var name='Audit_Date'></td>
        </tr>
    </tmpl_loop>
</tbody>
</table>

JQuery

        showDialog({content:data,title:'Financial Promotion Audit Trail History (FPID : ' + $('#fp_promotions_table tr.selected').attr('id') + ')'});                                            

        // turn into a datatable
        $('#fp_promotion_history').dataTable({        
                "sDom": 'R<"H"fr>t<"F"ip>',            
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "iDisplayLength": 25,
                "order": [[ 5, "desc" ]]
        });

What I don't understand is I already have a datatable on the page which is working fine.

I make an AJAX call, display the result (a table) with the JQuery UI Dialog, but when I try to turn it into a DataTable , it just errors?

The documentation implies multiple tables is OK : http://legacy.datatables.net/release-datatables/examples/basic_init/multiple_tables.html

So what am I doing wrong?

Thanks,
1DMF

allan

Can you link to a test case showing the issue please. Multiple tables should work fine: http://datatables.net/examples/basic_init/multiple_tables.html (current example, rather than the linked legacy one).

Allan

1DMF

Well I just messed about in JSFiddle, and it was working, so by process of elimination, I replaced JQuery 1.7.1 I was using with JQuery 1.10.2 and it is now working.

This must be a version conflict with JQuery even though DataTables is meant to be compatible with JQuery 1.7+ , I seem to be having issues with it.

Though when I select JQuery 1.7.2 on JSFiddle it still seems to work?

http://jsfiddle.net/b2fNM/26/

So perhaps it was related to the version I was using locally (1.7.1) which I have had for quite some time? Or was there a bug fix between JQuery 1.7.1 and 1.7.2 ?

UPDATE: Well it seems I was being an idiot after all, as it was related to the 'order' argument.

"order": [[ 3, "desc" ]]

I assume order is zero indexed?

Which isn't clear from this : https://datatables.net/reference/api/order()

As it talks about column 1 as [1] not [0] ?

Clarification on this would be appreciated.

allan

I assume order is zero indexed?

It is yes. I've just added a note to the documentation locally about this and I'll deploy an update to the site with this fix shortly! Thanks for pointing it out!

I should also say that there was a problem with jQuery 1.7 compatibility with 1.10.0 release - this has been corrected in the nightly. The issue was with how the select list for the page length was being created.

Allan

1DMF

No problem, shame the message is so ambiguous, especially as the docs implies [1] index based.

As an aside, thanks for the awesome plugin, displaying cool tables with a plethora functionality has never been so easy. Great job!