Question

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

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

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

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

未捕获的TypeError：aucTable.row不是函数

我的代码：

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').dataTable()变量中的mainTable调用中，以便稍后在调用row()函数时可以引用它。

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

请参阅this link以获取与您正在执行的操作类似的示例。

Answer 2

在当前代码中，acuTable var不存在。因此，您可以更改代码，以使acuTable var指向数据表实例，如：

var mainTable = $('#mainTable');
var acuTable;
$(document).ready(function () {
        acuTable = 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"
        });
    });

DataTables API row（）。data（）

2 个答案: