DataTables API row（）。data（）

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變量中的$('#mainTable').dataTable()調用中，以便稍后在調用row()函數時可以引用它。

另外需要注意的是，在你的點擊處理程序中，看起來你需要從數據表中找到tr - 調用mainTable.row(this)不會產生一行，因為this是點擊的按鈕，而不是行桌子。

請參閱此鏈接以獲取與您正在執行的操作類似的示例。

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