fnInitComplete doesn't work with aaData instead of sAjaxSource

RuthlezzKick

Hi Everyone,
Is there any reason why it does not work when i use aaData.
When i setup my table by sAjaxSource, function under fnInitComplete works corectly
but if i want to use aaData and put into some array, dataTable woks ok, I see all rows correctly but i can't use fnInintComplete function ( I'm using it to collapse/expand data rows )
Thank you for any attempt to help.

my js script:

var OrderLineTable = function(configuration) {

var defaults = {
    urls: {
        ajaxSource: ""
    }
};

var config = $.extend(true, {}, defaults, configuration);

var data2;
var aJson = eval('(' + $('#aJson').val() + ')');
var setupTable = function() {
    return data2 = $("#OrderLineTable").dataTable({

        aaData: aJson,                                        // it works without fnInitComplete         //sAjaxSource: config.urls.ajaxSource,    // - it works !!
        //sAjaxSource: aJson,                              //  -
        //sAjaxDataProp: "data.aJson",               //   - it doesn't load data

        sDom: '<"$grid-toolbar">tr<"dataTables-footer"ilp>',

        aoColumns: [

            {
                mData: "ID",
                sWidth: "16px",
                mRender: function(obj) {
                    return "<a class='details-link' href='#' title='DETAILS'><span class='ui-icon ui-icon-circle-plus'></span></a>";
                },
                bSortable: false
            },
            {

                mData: "Product",
                sWidth: "400px"
            },

            {
                mData: "Quantity",
                sWidth: "120px"
            }
        ],
        fnInitComplete: tableInitComplete2
    });
};

var tableInitComplete2 = function()
    {
        $('a.details-link', data2.fnGetNodes()).each(function() {
            $(this).click(function() {
                var nTr = $(this).closest("tr")[0];
                if ($(this).children().hasClass("ui-icon-circle-plus")) {

                    /* Open this row */
                    $(this).children().removeClass("ui-icon-circle-plus");
                    $(this).children().addClass("ui-icon-circle-minus");
                    var html = "&lt;p&gt;test text&lt;/p&gt;";
                    data2.fnOpen(nTr, html, "details");
                } else {
                    /* Close this row */
                    $(this).children().removeClass("ui-icon-circle-minus");
                    $(this).children().addClass("ui-icon-circle-plus");
                    data2.fnClose(nTr);
                }
                return false;
            });
        });
    };


var init = function () {
    data2 = setupTable();   
};

return {
    init: init,
    config: config,
    _setDataTable: function (t) { data2 = t; }
};

};

init script in cshtl file:

$(function () {
var page = OrderLineTable({
urls: {
ajaxSource: '@Url.Action("SomeMethod","SomeController)'
},
languageCode: ""
});
page.init();
});

allan

It seems to work okay here: http://live.datatables.net/wopebepe/1/edit .

Per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

RuthlezzKick

Thanks Alan. Next time I'll use the test page.
I solved this problem. Based on examples from this site I changed line:

$('a.details-link', data2.fnGetNodes()).each(function() {
on
$('#OrderLineTable').on('click', 'td.details-control', function () {

original line worked with sAjaxSource but not with aaData
Does it make sense ?