javascript - 数据表 API row().data()

Question

大家好，新年快乐:) 所以，我使用 dataTables 库。在他们的网站上，我找到了这个示例，其中函数必须返回被单击的表格行。

var table = $('#example').DataTable();

$('#example tbody').on( 'click', 'tr', function () {
    console.log( table.row( this ).data() );
} );

我尝试将此示例用于我的代码，但出现错误

Uncaught TypeError: aucTable.row is not a function

我的代码:

var mainTable = $('#mainTable');
$(document).ready(function () {
        mainTable.dataTable({
            'searching': false,
            'ajax': 'assets/static_data/data.json',
            'columns': [
                {
                    title: "Name",
                    data: "name"
                },
                {
                    title: "Office",
                    data: "office"
                },
                {
                    title: "Extn.",
                    data: "extn"
                },
                {
                    title: "Salary",
                    data: "salary"
                },
                {
                    title: "Start date",
                    data: "start_date"
                },
                {
                    title: "Details",
                    data: null,
                    defaultContent: "<button class='details-btn btn'>More details</button>",
                    sorting: false
                }
            ]
        });
    });

$('#mainTable').on('click', '.details-btn', function () {

        var selectedRow = aucTable.row(this).data();
        console.log(selectedRow);

        $("<div id='details-dialog'/>").dialog({
            modal: true,
            show: true,
            maxWidth: 620,
            maxHeight: 300,
            minWidth: 500,
            minHeight: 200,
            title: "Hello World"
        });
    });

有人能告诉我，为什么我会出现这个错误吗？为什么我无法获取被单击的行？

每个人的坦克。 最好的问候和乐趣。

Answer 1

我不熟悉 datatables，但是您可以尝试将其更改为以下内容:

var mainTable = null;
$(document).ready(function () {
    mainTable = $('#mainTable').dataTable({...});
});

$('#mainTable').on('click', '.details-btn', function () {
    var tr = $(this).closest('tr');
    var selectedRow = mainTable.row(tr).data();
    console.log(selectedRow);
    //...
});

请注意，我将结果存储到 mainTable 变量中的 $('#mainTable').dataTable() 调用中，以便您稍后可以引用它当调用 row() 函数时。

另一件需要注意的事情是，在您的点击处理程序中，您似乎需要从数据表中找到 tr - 调用 mainTable.row(this) 确实不会产生一行，因为 this 是被点击的按钮，而不是表格的行。

参见 this link对于一个看起来与您正在做的事情相似的例子。