Блог

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

Важно: я получаю такое же поведение, если удаляю объект TreeGrid из параметров DataTable. Я даже удалил JavaScript TreeGrid…

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

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

 $(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;
        }
    },
];
  

Хорошо, я нашел, как это сделать:

 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();
            }

        });
});