I'm getting a NaN/undefined result for a calculated field

joefrezza

Hello, in an ASP.Net MVC application I have a table that's based on a model passed to the view. For this reason, the table is not based on a Json and the fields have no column names that I can reference in the 'columns'[] section of the script (or at least I don't know how!...). Still, the table works fine except that I can't manage to generate a calculated field. In all the various experiments I keep getting a NaN or undefined result, depending on the various attempts, and I understand this is because evidently I'm not referencing the proper data value, but how can I do that if I don't have column names?
The table is properly structured, thead, tbody and tfoot have the same number of columns. This is the html for the table:

<table id="mainTable" class="table table-hover">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.Value1)</th>
            <th>@Html.DisplayNameFor(model => model.Value2)</th>
            <th>test</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.Value1)</td>
                <td>@Html.DisplayFor(modelItem => item.Value2)</td>
                <td></td>
            </tr>
        }
    </tbody>
    <tfoot><tr><th></th><th></th><th></th></tr></tfoot>
</table>

The render function on first and second columns works just fine. The third column is where I am trying to calculate and display the difference between first and second column, and that's where I get NaN or undefined. This is the script:

<script>
    $(document).ready(function () {
        // DataTable
        var table = $('#mainTable').DataTable({
            responsive: true,
            columns: [
            { render: function (data, type, row) { return data + '$' } },
            { render: function (data, type, row) { return data + '$' } },
            { render: function (data, type, row) { return (row.Value1 - row.Value2) + '$' }}]
        });
    });
</script>

This is the result I'm getting on this particular attempt. I've tried other versions, unfortunately with similar disappointing results:

Value 1  Value 2  test
200.00$  100.00$  NaN$
etc...

I have also tried this:

columns: [ { data: 'Value1', render: function (data, type, row) { return data + '$' } } ]

and this

columns: [ { name: 'Value1', render: function (data, type, row) { return data + '$' } } ]

and this

columns: [ { data: 'Value1', name: 'Value1', render: function (data, type, row) { return data + '$' } } ]

but in all cases the entire script fails.

Would someone be so kind to tell me what I'm doing wrong, or what I should do to make this work?

Thank you!

allan

Since you are reading DOM sourced data, DataTables will automatically read the information into an array - so you would access it as row[0] or row[1] rather than row.Value1.

Example: http://live.datatables.net/zeholaqu/1/edit .

If you want to read the data into objects you can do so using columns.data - see this part of the manual.

Allan

joefrezza

Thank you Allan. Forgive me for not getting back to you earlier but I didn't expect such a quick answer. As a matter of fact, I had tried already your solution but it didn't work at first because I didn't realize I was dealing with a string that looked like a number. Thank you Sir.