Unable to select row data

ponasromas

I have edit and delete buttons on each row in a table. It seems I can't send row data for processing. It keep saying "undefined". Here is sample:

$(document).ready(function () {

    var table = $('#admin_subdomains').DataTable({
        dom: 'lBfrtip',
        processing: true,
        serverSide: false,
        ajax: {
            url: '/src',
            type: 'POST',
            dataSrc: '',
        },
        columns: [
            {
                targets: 0,
                data: null,
                className: "select-checkbox",
                defaultContent: '',
                orderable: false
            },
            { data: 'name' },
            { data: 'content' },
            { data: 'proxied' },
            { data: 'id' },
            { data: 'created_on' },
            { data: 'modified_on' },
            {
                data: null,
                defaultContent: '<i class="text-warning fa fa-pencil edit-record"/>',
                orderable: false
            },
            {
                data: null,
                defaultContent: '<i class="text-danger fa fa-trash delete-record"/>',
                orderable: false
            },
        ],
        columnDefs: [ {
            orderable: false,
            defaultContent: '',
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        order: [[4, 'desc']]
    });

    // Edit record
    $('#admin_subdomains tbody').on( 'click', '.edit-record', function () {

        var rowdata = table.row( this ).data();

        console.log(rowdata);

    });

    // Delete a record
    $('#admin_subdomains tbody').on( 'click', '.delete-record', function () {
        console.log('ff');
    });

});

I have added .edit-record and .delete-record classes to custom elements in columns. When I press .edit-record element it throws me "undefined" error.

How to properly send single row data while custom column element is clicked? I need to send single row data as a JSON to server for processing.

P.S. When I use this:

table.row({ clicked: true }).data();

It send only the first row data. No matter which row I edit or delete.

kthorngren

The row-selector docs show all the options available to use as a row selector. You have table.row( this ).data() which this is the .edit-record element, that is clicked, which is an i element. You will want to pass the td or tr of the clicked row, something like this:

    $('#admin_subdomains tbody').on( 'click', '.edit-record', function () {
        var td = $( this ).closest( 'td' ); 
        var rowdata = table.row( td ).data();
 
        console.log(rowdata);
 
    });

Kevin