MVC Core 5, Data tables. Subtract values

MVC Core 5, Data tables. Subtract values

emwagneremwagner Posts: 4Questions: 1Answers: 0

Hello,
I am using the ABP.IO framework to create a site in MVC Core 5. It is using DataTables. I am able to obtain the start and end odometer miles from an MSSQL database successfully, but what I dont know how to do and havent figured it out yet is how to take those pre-existing numbers in the datatable columns and subtract one from the other and place in a third column.

Essentially, one column has StartOdometer, a second column has EndOdometer, I need to subtract EndOdometer from StartOdometer and then the sum of that subtraction to be put into a third column for each row in the datatable.

This is my existing code. Please advise how I can do this as I am not sure how its done.

$(function () {
    var l = abp.localization.getResource('CRM');

    var dataTable = $('#DoorDashTable').DataTable(
        abp.libs.datatables.normalizeConfiguration({
            serverSide: true,
            paging: true,
            order: [[1, "asc"]],
            searching: false,
            scrollX: true,
            ajax: abp.libs.datatables.createAjax(cRM.services.contractor.mileageLog.doorDashMileageLog.getList),
            columnDefs: [
                {
                    title: l('Datatable:ColumnHeader:DateOccurred'),
                    data: "dateOccurred",
                    render: function (data) {
                        return luxon
                            .DateTime
                            .fromISO(data, {
                                locale: abp.localization.currentCulture.name
                            }).toLocaleString();
                    }
                },
                {
                    title: l('Datatable:ColumnHeader:StartOdometer'),
                    data: "startOdometer"
                },
                {
                    title: l('Datatable:ColumnHeader:EndOdometer'),
                    data: "endOdometer"
                },
                {
                    title: l('Datatable:ColumnHeader:CalculateTotalMilesDriven'),
                    //data: "calculateTotalMilesDriven"
                    // endOdometer - starOdometer = place the number in this column.
                },
                {
                    title: l('Datatable:ColumnHeader:IsCompanyVehicle'),
                    data: "isCompanyVehicle"
                },
                {
                    title: l('Datatable:ColumnHeader:IsReimbursedByCompany'),
                    data: "isReimbursedByCompany"
                },
                //{
                //    title: l('Datatable:ColumnHeader:ContractorType'),
                //    data: "companyType",
                //    render: function (data) {
                //        return l('Enum:ContractorType:' + data);
                //    }
                //},
                {
                    title: l('Datatable:ColumnHeader:CreationTime'), data: "creationTime",
                    render: function (data) {
                        return luxon
                            .DateTime
                            .fromISO(data, {
                                locale: abp.localization.currentCulture.name
                            }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
                    }
                }
            ]
        })
    );
});

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,142Questions: 1Answers: 2,586
    Answer ✓

    You would use columns.render for that. You're using it already in the final column, so it would be similar to that. The third parameter to the function is the row data, so that will give you the two values to then calculate the difference,

    Colin

  • emwagneremwagner Posts: 4Questions: 1Answers: 0

    I am not getting this right. I tried it. I ran the app with CTRL+F5. No data displayed. No errors. I went into F12 through Chrome browser to receive:

    Uncaught TypeError: Cannot read properties of undefined (reading 'endOdometer')
    at render (Index.js:36)
    at jquery.dataTables.js:2606
    at Object.oCol.fnGetData (jquery.dataTables.js:2080)
    at _fnGetCellData (jquery.dataTables.js:2498)
    at _fnGetMaxLenString (jquery.dataTables.js:5816)
    at _fnGetWidestNode (jquery.dataTables.js:5792)
    at _fnCalculateColumnWidths (jquery.dataTables.js:5635)
    at _fnAdjustColumnSizing (jquery.dataTables.js:2139)
    at jquery.dataTables.js:5730
    at jquery.dataTables.js:1629

    code:
    {
    title: l('Datatable:ColumnHeader:CalculateTotalMilesDriven'),
    data: null,
    render: function (data, row) {
    return row.data.endOdometer - row.data.startOdometer;
    }
    },

  • emwagneremwagner Posts: 4Questions: 1Answers: 0

    After a few coffees and a break. Figured it out.

    This is what you would use to subtract endOdometer from startOdometer to get the miles driven.

    {
                        title: l('Datatable:ColumnHeader:CalculateTotalMilesDriven'),
                        data: null,
                        render: function (data, type, row) {
                            return (data["endOdometer"] - data["startOdometer"])
                        }
                    },
    

    For anyone using ABP.IO, this is the full code for my file:
    $(function () {
    var l = abp.localization.getResource('CRM');

        var dataTable = $('#DoorDashTable').DataTable(
            abp.libs.datatables.normalizeConfiguration({
                serverSide: true,
                paging: true,
                order: [[1, "asc"]],
                searching: false,
                scrollX: true,
                ajax: abp.libs.datatables.createAjax(cRM.services.contractor.mileageLog.doorDashMileageLog.getList),
                columnDefs: [
                    {
                        title: l('Datatable:ColumnHeader:DateOccurred'),
                        data: "dateOccurred",
                        render: function (data) {
                            return luxon
                                .DateTime
                                .fromISO(data, {
                                    locale: abp.localization.currentCulture.name
                                }).toLocaleString();
                        }
                    },
                    {
                        title: l('Datatable:ColumnHeader:StartOdometer'),
                        data: "startOdometer"
                    },
                    {
                        title: l('Datatable:ColumnHeader:EndOdometer'),
                        data: "endOdometer"
                    },
                    {
                        title: l('Datatable:ColumnHeader:CalculateTotalMilesDriven'),
                        data: null,
                        render: function (data, type, row) {
                            return (data["endOdometer"] - data["startOdometer"])
                        }
                    },
                    {
                        title: l('Datatable:ColumnHeader:IsCompanyVehicle'),
                        data: "isCompanyVehicle"
                    },
                    {
                        title: l('Datatable:ColumnHeader:IsReimbursedByCompany'),
                        data: "isReimbursedByCompany"
                    },
                    //{
                    //    title: l('Datatable:ColumnHeader:ContractorType'),
                    //    data: "companyType",
                    //    render: function (data) {
                    //        return l('Enum:ContractorType:' + data);
                    //    }
                    //},
                    {
                        title: l('Datatable:ColumnHeader:CreationTime'),
                        data: "creationTime",
                        render: function (data) {
                            return luxon
                                .DateTime
                                .fromISO(data, {
                                    locale: abp.localization.currentCulture.name
                                }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
                        }
                    }
                ]
            })
        );
    });
    
  • emwagneremwagner Posts: 4Questions: 1Answers: 0

    I figured it out after a few coffees.

    updated code to make a simple subtraction.
    {
    title: l('Datatable:ColumnHeader:CalculateTotalMilesDriven'),
    data: null,
    render: function (data, type, row) {
    return (data["endOdometer"] - data["startOdometer"])
    }
    },

    Full code:
    $(function () {
    var l = abp.localization.getResource('CRM');

        var dataTable = $('#DoorDashTable').DataTable(
            abp.libs.datatables.normalizeConfiguration({
                serverSide: true,
                paging: true,
                order: [[1, "asc"]],
                searching: false,
                scrollX: true,
                ajax: abp.libs.datatables.createAjax(cRM.services.contractor.mileageLog.doorDashMileageLog.getList),
                columnDefs: [
                    {
                        title: l('Datatable:ColumnHeader:DateOccurred'),
                        data: "dateOccurred",
                        render: function (data) {
                            return luxon
                                .DateTime
                                .fromISO(data, {
                                    locale: abp.localization.currentCulture.name
                                }).toLocaleString();
                        }
                    },
                    {
                        title: l('Datatable:ColumnHeader:StartOdometer'),
                        data: "startOdometer"
                    },
                    {
                        title: l('Datatable:ColumnHeader:EndOdometer'),
                        data: "endOdometer"
                    },
                    {
                        title: l('Datatable:ColumnHeader:CalculateTotalMilesDriven'),
                        data: null,
                        render: function (data, type, row) {
                            return (data["endOdometer"] - data["startOdometer"])
                        }
                    },
                    {
                        title: l('Datatable:ColumnHeader:IsCompanyVehicle'),
                        data: "isCompanyVehicle"
                    },
                    {
                        title: l('Datatable:ColumnHeader:IsReimbursedByCompany'),
                        data: "isReimbursedByCompany"
                    },
                    //{
                    //    title: l('Datatable:ColumnHeader:ContractorType'),
                    //    data: "companyType",
                    //    render: function (data) {
                    //        return l('Enum:ContractorType:' + data);
                    //    }
                    //},
                    {
                        title: l('Datatable:ColumnHeader:CreationTime'),
                        data: "creationTime",
                        render: function (data) {
                            return luxon
                                .DateTime
                                .fromISO(data, {
                                    locale: abp.localization.currentCulture.name
                                }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
                        }
                    }
                ]
            })
        );
    });
    
Sign In or Register to comment.