时间戳

首页 > 解决方案 > 在表加载之前触发的 DataTable 初始化事件

datatables - 在表加载之前触发的 DataTable 初始化事件

问题描述

我有一个带有来自 Ajax 的 jQuery Datatable 的页面，并使用 npm treeGrid 插件绘制。表格画得很好，但我试图赶上表格加载的结尾来做一些事情（在树展开时获取额外的数据以准备好）。在绘制表格之前会触发 init.dt 事件或 initComplete 选项。如果我在事件中发出警报，它会在绘制表格顶部和底部之后但在呈现数据之前显示。如果我尝试访问表数据，它是未定义的。

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

所以我的问题是：当一切都准备就绪时，我怎样才能运行代码？

下面是 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;
        }
    },
];

在此处输入图像描述 在此处输入图像描述

标签： datatables

解决方案

好的，我找到了如何做到这一点：

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

        });
});

推荐阅读