Question

我有一个页面，其中包含来自Ajax的jQuery数据表，并使用npm treeGrid插件绘制。该表绘制得很好，但是我正在尝试捕获表加载的末尾以做一些事情（在展开树时准备好其他数据）。在绘制表之前会触发init.dt事件或initComplete选项。如果我在事件中放置警报，则在绘制了顶部和底部之后但在呈现数据之前显示了该警报。而且，如果我尝试访问表数据，则它是未定义的。

重要提示：如果我从DataTable选项中删除treeGrid对象，则会得到相同的行为。我什至删除了treeGrid javascript ...

所以我的问题是：一切准备就绪后如何运行代码？

下面是Datatble的两个实现，分别是init.dt或initComplete。我还添加了column对象。下面是警报的两个屏幕截图，然后是绘制的表格。

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

        });
});

在加载表格之前触发了DataTable初始化事件

1 个答案: