DataTables API row（）。data（）

Question

Hi everybody and happy new year :) So, I use dataTables library. In their web site i found this example, where function must return the row of table, which was clicked.

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

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

I try use this example for my code, but i have the error

Uncaught TypeError: aucTable.row is not a function

my code:

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

Can somebody tell me, why I have this error? And why i can't get the row, which was clicked?

Tanks for everybody. Best regard and have fun.

Answer 1

I'm not familiar with datatables , however you might try changing it to the following:

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);
    //...
});

Note that I'm storing the result to the $('#mainTable').dataTable() call in the mainTable variable so that you can reference it later when calling the row() function.

The other thing to note is that in your click handler, it looks like you need to find the tr from the datatable - calling mainTable.row(this) does not yield a row because this is the button that was clicked, not the row of the table.

See this link for an example that seems similar to what you're doing.

Answer 2

In the current code, the acuTable var not exist. So you can change your code in order to have an acuTable var pointing to the datatable instance, something like:

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