Datatable returns "Undefined" when I try to print rowdata in console

markMathews1989

Hello,

I am trying to print out my row data in the console/alert using the following script from the documentation:

$('#table tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        console.log( 'You clicked on '+data[0]+'\'s row' );
} );

My problem is, when I click on my row, the alert/console put out "Undefined". I have no problem filling data in the table, but viewing it in the console or in an alert is where the problem arises. I'm not sure where I went wrong, since I am doing what is being done in the example. data[0] returns "Undefined" for all my rows.

I have a very simple test setup:

$(document).ready(function() {
    var table = $('#table').DataTable( {
        ajax: {
            url: '/docs/accounting',
            dataSrc: ''
        },
        info: false,
        order: [[ 2, "asc" ]],
        paging: false,
        searching: true,
        scrollCollapse: true,
        columns: [
            {
                data: "id"
            },
            {
                data: "type"
            },
            {
                data: "creationDate",
            },
            {
                data: "department",
            }
        ]

    } );
    
    $('#table tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        console.log( 'You clicked on '+data[0]+'\'s row' );
    } );
)};

kthorngren

Since you are using columns.data to define your columns the data structure is objects not arrays. Instead of data[0] you need to use data.id.

Kevin

markMathews1989

Yes that worked. thanks!

markMathews1989

How can I render this within the column? I am trying to build the url for a downloadable file based off of the data being returned in my rows

I want to build the url to do something similar based off of the id and department:

<a href='/docs/'department'/'id''></a>

kthorngren

The columns.render docs have some examples that should help. Post back if you still have questions.

Kevin

markMathews1989

Thanks for your response and for linking the documentation. When rendering the column data, I have passed row as a parameter, and I've tried to print the row's department doing row.department. I get a console error that reads "unreachable code after return statement"

this is the new data column I am adding:

{
    data: "file",
    render: function( data, type, row, meta ) {
        console.log(row);
        console.log(row.department);
    }
}

When I hover over row in the inspector, I see everything involved in that row, and when I hover over row.department, I see the department for that row. I do apologize for asking many questions. Just new to all of this.

markMathews1989

Sorry. I found out what the issue was. I have a condition that I did not include in the script I provided that fills a message data is null for that column (which it is) and tried to display the output in that statement. Everything is now working. Thanks again!

kthorngren

I get a console error that reads "unreachable code after return statement"

A search for that error results in this page:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Stmt_after_return

The code you posted doesn't have a return statement so the error must be from a different section of your code.

columns.render does need to have something returned or you will likely get an alert message with an error. You can use the console.log statments in the function but you also need to return something. Here is another example:
https://datatables.net/examples/advanced_init/column_render.html

Kevin

markMathews1989

Stupid mistakes on my end. I was able to figure out the build of the url. I have one final question related to this. How can I build my file data column from 2 columns instead of the way I have it now? This column should only be populated if a file is present, otherwise it should display nothing. The way I have it written is not going to work since it will always return null. The java was written to not return the file.

markMathews1989

This is what I currently have built:

{
    data: "file",
    render: function( data, type, row, meta ) {
        var message = "No File",
            department = row.department,
            id = row.id;
        if(data == null) {
            return message;
        } else {
            return '<a href="/docs/'+department+'/'+id+'" class="file-download">' 
            + </a>";
        }
    }
}

colin

That looks ok, why isn't it behaving the way you want? We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

markMathews1989

I was able to figure out the issue. Thanks for your response!