can i update cell/row of another table on same page in footercallback function of a table?

omerabbasi78

table1

 var table = $("#tblIncomeCashFlow").DataTable({
footerCallback: function (row, data, start, end, display) {
                var api = this.api(),
                    data;

            var colNames = ["ThirdYearValue", "SecondYearValue", "FirstYearValue", "MiddleColumn",
                "Broker", "Appraisal", "Month1", "Month2", "Month3", "Month4", "Month5", "Month6", "Month7",
                "Month8", "Month9", "Month10", "Month11", "Month12", "SecondLastColumn", "LastColumn"];

            var intVal = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                    i : 0;
            };
            for (i = 0; i < colNames.length; i++) {
                rowIdx = 0;
                var currCol = colNames[i];

                var colName = currCol + ":name";

                var total = api
                    .cells(null, colName, { page: 'current' })
                        .render('display')
                     .reduce(function (a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);
                $('tr:eq(0) td[title="' + currCol + '"]', api.table().footer()).html('$' + (total).toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));

            }
        },

table2

    var table3 = $("#tblExpenseCashFlow").DataTable({
    footerCallback: function (row, data, start, end, display) {
                    var api = this.api(),
                        data;

            var colNames = ["ThirdYearValue", "SecondYearValue", "FirstYearValue", "MiddleColumn",
                "Broker", "Appraisal", "Month1", "Month2", "Month3", "Month4", "Month5", "Month6", "Month7",
                "Month8", "Month9", "Month10", "Month11", "Month12", "SecondLastColumn", "LastColumn"];

            var intVal = function (i) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '') * 1 :
                    typeof i === 'number' ?
                    i : 0;
            };
            for (i = 0; i < colNames.length; i++) {
                rowIdx = 0;
                var currCol = colNames[i];

                var colName = currCol + ":name";

                var total = api
                    .cells(null, colName, { page: 'current' })
                        .render('display')
                     .reduce(function (a, b) {
                         return intVal(a) + intVal(b);
                     }, 0);
                $('tr:eq(0) td[title="' + currCol + '"]', api.table().footer()).html('$' + (total).toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));

            }
        },

now above 2 footercallback are adding the column of respective tables.
i want to add these footer values in footercallback of both tables (i.e. on value change the footer value changes dynamically im bound to do that in footercallback) and show in new table whos HTML is as follows

<tr>
                        <td class="empty_row"> NOI </td>
                        <td class="tab-1"> </td>
                        <td class="tab-1"> </td>
                        <td title="ThirdYearValue" class="tab-1"> - </td>
                        <td title="SecondYearValue" class="tab-1"> - </td>
                        <td title="FirstYearValue" class="tab-1"> </td>
                        <td title="MiddleColumn" class="tab-1"> </td>
                        <td title="Broker" class="tab-1"> </td>
                        <td title="Appraisal" class="tab-1"> </td>


                        <td title="Month1" class="tab-2"> </td>
                        <td title="Month2" class="tab-2"> </td>
                        <td title="Month3" class="tab-2"> </td>
                        <td title="Month4" class="tab-2"> </td>
                        <td title="Month5" class="tab-2"> </td>
                        <td title="Month6" class="tab-2"> </td>
                        <td title="Month7" class="tab-2"> </td>
                        <td title="Month8" class="tab-2"> </td>
                        <td title="Month9" class="tab-2"> </td>
                        <td title="Month10" class="tab-2"> </td>
                        <td title="Month11" class="tab-2"> </td>
                        <td title="Month12" class="tab-2"> </td>
                        <td title="SecondLastColumn" class="tab-2"> </td>
                        <td title="LastColumn" class="tab-2"> </td>
                    </tr>

if there is any better way to fit in the situation then please suggest otherwise any solution to this

Regards

allan

I think the way I would approach this is simply to add something like:

var combined = total - $(table3.column( ... ).footer()).text()*1;

and write that value into whatever cell you want to display it in. It assumes that the other table already has its value calculated. You'd use the inverse for the footer callback in the other table.

The other option would be to recalculate the total from the second table and performing the calculation that way.

Regards,
Allan

omerabbasi78

thanks for the reply Allan. I did it another way. I used jquery for my flow and that is working fine. Thanks a lot.