События инициализации DataTable, запущенные до загрузки таблицы

Question

У меня есть страница с jQuery Datatable от Ajax, нарисованная с помощью плагина npm treeGrid. Таблица прорисована отлично, но я пытаюсь поймать конец загрузки таблицы, чтобы сделать некоторые вещи (получить дополнительные данные, чтобы быть готовым, когда дерево развернуто). Событие init.dt или опция initComplete запускаются до рисования таблицы. Если я помещаю предупреждение в событие, оно отображается после того, как верх и низ таблицы прорисованы, но до того, как данные будут отображены. И если я попытаюсь получить доступ к данным таблицы, это не определено.

Важно: я получаю то же поведение, если удаляю объект treeGrid из опций DataTable. Я даже удалил javascript treeGrid ...

Итак, мой вопрос: как я могу запустить код, когда все действительно готово?

Ниже представлены две реализации Datatble с init.dt или initComplete. Я также добавляю объект столбцов. Ниже приведены два снимка экрана предупреждения, а затем составлена ​​таблица.

$(document).ready(function () {
    $('#mainTable')
        .on('init.dt', function () {
            alert('Table initialisation complete')
        })
        .DataTable({
            "ajax": '/API/RRate',
            'treeGrid': {
                'left': 20,
                'expandIcon': '<span>+</span>',
                'collapseIcon': '<span>-</span>'
            },
            "columns": columns
        });
});

$(document).ready(function () {
    $('#mainTable')
        .DataTable({
            "ajax": '/API/RRate',
            'treeGrid': {
                'left': 20,
                'expandIcon': '<span>+</span>',
                'collapseIcon': '<span>-</span>'
            },
            "columns": columns,
            "initComplete": function (settings, json) {
                alert('Table initialisation complete')
            }

        });
});

var columns = [
    {
        title: '',
        target: 0,
        className: 'treegrid-control',
        data: function (item) {
            if (item.children) {
                return '<span>+</span>';
            }
            return '';
        }
    },
    {
        title: 'Name',
        target: 1,
        data: function (item) {
            return item.name;
        }
    },
    {
        title: 'HeadCount',
        target: 2,
        data: function (item) {
            return item.headCount;
        }
    },
    {
        title: 'Responded',
        target: 3,
        data: function (item) {
            return item.responded;
        }
    },
    {
        title: 'Percentage',
        target: 4,
        data: function (item) {
            return item.percentage;
        }
    },
    {
        title: 'InProcess',
        target: 5,
        data: function (item) {
            return item.inProcess;
        }
    },
];

Answer 1

ОК, я нашел, как это сделать:

function AfterLoad()
{
    table.rows().each(function () {
        console.log(this.cells(0));
        var rowData = this.data();
        console.log(rowData[0]);
    });
}

$(document).ready(function () {
    table = $('#mainTable')
        .DataTable({
            "ajax": '/API/RRate',
            'treeGrid': {
                'left': 20,
                'expandIcon': '<span>+</span>',
                'collapseIcon': '<span>-</span>'
            },
            "columns": columns,
            "initComplete": function (settings, json) {
                AfterLoad();
            }

        });
});