I am using datatable, loading data from ajax and preforming operation with javacript.

var table = $('#example').DataTable({
    "ajax": {
        "url": apiurl,
        "type": 'GET',
        "datatype": 'json'
    },

    //   data: dataSet,
    columns: [
        { title: "Item Key", data: "itemKey" },
        { title: "Description", data: "description" },
        { title: "Pounds", data: "pound" },
        {
            title: "Current Cost", data: function (data, type, row) {


                return '<input type="number" class ="price-input"  value="' + data.cost + '" style="background-color:lightgoldenrodyellow;">';

            }
        },
        { title: "Current Cost", data: "cost" },
        { title: "Unit", data: "unit" },
        {
            title: "Quantity", data: "quantity"

        },
        {
            title: "Total", data: function (data, type, row) {
               return data.cost * data.quantity;
               

            }
        },
        {
            title: "New Total", "data": "total",
            "render": function (data, type, row) {
                return "$" + data;
            }
        }

    ],
  
});

function calcTotal(q, p) {
    var t = 0.00;
    t = parseInt(q) * parseFloat(p);
    return t.toFixed(2);
}
var table = $('#example').DataTable();
$.each(table, function (i, r) {
    r.total = calcTotal(r.qty, r.price);
});


$("#example").on("change", ".price-input", function (event) {
    var row = $(this).closest("tr");
    var qty = table.cell($("td", row).eq(6)).data();
    var price = $(this).val();
    var total = table.cell($("td", row).eq(8).get(0));
    total.data(calcTotal(qty, price)).draw();
});

'''

My problem is in the last column, when the datatable loads, value appear as undefined, when I change the value in textbox I am getting the right result and number How Can I able to see right number when Datatable loads? Please guide me