No datatables functions available after initialization

Phyx

Hi all,
I've been using datatables for a while now and recently upgraded to 1.9.4 and JQuery 1.11. But now after initialization e.g. var table = $("#foo").dataTable() no functions are available on the table. The table themselves work fine, but calling any external function such as .fnFilter or .fnDraw returns 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'fnFilter'

Oddly enough:

$.fn.DataTable.fnIsDataTable(document.getElementById("PnOverviewList"))
true

$.fn.DataTable.fnIsDataTable($("#PnOverviewList"))
false

$(document.getElementById("PnOverviewList")).dataTable().fnFilter("1043494")
undefined <-- this works

dataTable
{
   [functions]: ,
   __proto__: { },
   context: { },
   dataTableExt: { },
   dataTableSettings: [ ],
   jquery: "1.11.0",
   length: 0,
   prevObject: { },
   selector: "#PnOverviewList .dataTables_filter input[type=text]"
}

dataTable.dataTable().fnFilter("1043494")
Unable to get property 'oFeatures' of undefined or null reference

dataTable.fnFilter("107")
Unable to get property 'oFeatures' of undefined or null reference

So recreating the table everytime works, but that seems like an odd solution.. Hopefully someone can point me in the right direction of what I'm doing wrong?

My script initialization looks like (for brevity's sake I have removed some of the data in mData functions)

            dataTable = $("#PnOverviewList").dataTable({
                "aoColumnDefs": [
                    { "bSortable": false, "bSearchable": false, "aTargets": [9, 12, 13] },
                    { "bVisible" : false, "aTargets" : [9, 13] },
                    { "mData" : function (data, type, row) { return renderNoneOrData(data, type, row, 2); }, "aTargets": [2] },
                    { "mData" : function (data, type, row) { return renderImageData(data, type, row, 8); }, "aTargets" : [8] },
                    { "mData" : function (data, type, row) { return renderTextImageWithData(data, type, row, 9, 10); }, "aTargets" : [10] },
                    { "mData" : function (data, type, row)
                                {
                                    if(type === 'set'){
                                        var value = data[11];
                                        var countryName = data[3];
                                        switch (value) {
                                            case 1:
                                               data["display-" + 11] = lookupImageOnly(1)";
                                               break;
                                            case 2:
                                               data["display-" + 11] = lookupImageOnly(2);
                                               break;
                                            case 3:
                                               data["display-" + 11] = lookupImageOnly(3);
                                               break;
                                            case 5:
                                               data["display-" + 11] = lookupImageOnly(5);
                                               break;
                                            default:
                                            data["display-" + 11] = "";
                                        }
                                    } else if (type === 'display' || type === 'filter'){
                                        return data["display-" + 11];
                                    }

                                    return data[11];
                                },
                      "aTargets" : [11]
                    },
                    { "mData" : function (data, type, row)
                                {
                                    if(type === 'set'){
                                        var pnId = data[12];
                                        if (pnId == 0){
                                            data["display-" + 12] = '...';
                                        }else{
                                            data["display-" + 12] = '...';
                                        }
                                    } else if (type === 'display' || type === 'filter'){
                                        return data["display-" + 12];
                                    }

                                    return data[12];
                                },
                      "aTargets" : [12]
                    }
                ],
                "aaSorting"   : [],
                "bSortClasses": false,
                "bDeferRender": true,
                "bAutoWidth"  : false,
                "bProcessing" : true,
                "bStateSave"  : true,
                "bServerSide" : true,
                "fnStateSave" : function (oSettings, oData) { localStorage.setItem( 'PnOverviewList', JSON.stringify(oData) ); },
                "fnStateLoad" : function (oSettings) { return JSON.parse( localStorage.getItem('PnOverviewList') ); },
                "sAjaxSource" : "/PN/Search"
            });

I thought it might be a conflict with another script, but having disabled them all one by one (at least the major ones like bootstrap) the same issue exists.

tangerine

Second of the "Most Common FAQ's" perhaps?

http://datatables.net/faqs/index

Phyx

Hi tangerine,

Thanks for the reply!

That wasn't the issue, but it helped me find it. Below that in the rest of the initialization call there was a call that attempted to style the searchbox, this call returned a JQuery object and was overriding the DataTable object. I seem to have missed that for over two weeks :(

Thanks for the help :)

tangerine

I seem to have missed that for over two weeks :(

I recognise that feeling......