The sum of column change when calling drawcallback

AndiFathul

How can i make the sum of column updating whenever the result from search builder came back?
I see that the api.length always get the max length even though it already been filtered

$(document).ready(function () {
        var table = $('#dataTableMonev').DataTable({
            "paging": true,
            dom: 'Qlfrtip',
            drawCallback: function(){
                var api = this.api();
                var intVal = function (i) {
                    return parseInt(i) || 0;
                };
                
                function myFunc(total, num) {
                    return intVal(total) + intVal(num);
                }
                var data_ai_1 = api.column(5).data();
                var data_aki_1 = api.column(6).data();

                var data_ai_3 = api.column(9).data();
                var data_aki_3 = api.column(10).data();

                var jan_akb = api.column(11).data();
                var jan_real = api.column(12).data();
                var feb_akb = api.column(13).data();
                var feb_real = api.column(14).data();
                var mar_akb = api.column(15).data();
                var mar_real = api.column(16).data();
                var apr_akb = api.column(17).data();
                var apr_real = api.column(18).data();
                var mei_akb = api.column(19).data();
                var mei_real = api.column(20).data();
                var jun_akb = api.column(21).data();
                var jun_real = api.column(22).data();
                var jul_akb = api.column(23).data();
                var jul_real = api.column(24).data();
                var aug_akb = api.column(25).data();
                var aug_real = api.column(26).data();
                var sep_akb = api.column(27).data();
                var sep_real = api.column(28).data();
                var okt_akb = api.column(29).data();
                var okt_real = api.column(30).data();
                var nov_akb = api.column(31).data();
                var nov_real = api.column(32).data();
                var des_akb = api.column(33).data();
                var des_real = api.column(34).data();

                //alert( Object.keys(data_ai_1).length );

                var listColumn = [data_ai_1, data_aki_1, data_ai_3, data_aki_3, jan_akb, jan_real, 
                feb_akb, feb_real, mar_akb, mar_real, apr_akb, apr_real, mei_akb, mei_real, jun_akb, jun_real, jul_akb, jul_real,
                aug_akb, aug_real, sep_akb, sep_real, okt_akb, okt_real, nov_akb, nov_real, des_akb, des_real]

                var reduceColumn = []
                for (var obj in listColumn){
                    var data = listColumn[obj];
                    //console.log(data);
                    Object.keys(data).forEach(function(key){
                        if(typeof data[key] === 'string'){
                            data[key] = intVal(data[key].replaceAll(',',''))
                        }
                    })
                    reduceColumn.push(data.reduce(myFunc))
                }

                console.log(reduceColumn);

                //USE REPETITION LATER
                var sum_ai_1 = data_ai_1.reduce(myFunc);
                var sum_aki_1 = data_aki_1.reduce(myFunc);
                var sum_ai_3 = data_ai_3.reduce(myFunc);
                var sum_aki_3 = data_aki_3.reduce(myFunc);

                $('#total_ai_1').html(reduceColumn[0]);
                $('#total_aki_1').html(reduceColumn[1]);
                $('#total_ai_3').html(reduceColumn[2]);
                $('#total_aki_3').html(reduceColumn[3]);
                $('#jan_akb').html(reduceColumn[4]);
                $('#jan_real').html(reduceColumn[5]);
                $('#feb_akb').html(reduceColumn[6]);
                $('#feb_real').html(reduceColumn[7]);
                $('#mar_akb').html(reduceColumn[8]);
                $('#mar_real').html(reduceColumn[9]);
                $('#apr_akb').html(reduceColumn[10]);
                $('#apr_real').html(reduceColumn[11]);
                $('#mei_akb').html(reduceColumn[12]);
                $('#mei_real').html(reduceColumn[13]);
                $('#jun_akb').html(reduceColumn[14]);
                $('#jun_real').html(reduceColumn[15]);
                $('#jul_akb').html(reduceColumn[16]);
                $('#jul_real').html(reduceColumn[17]);
                $('#aug_akb').html(reduceColumn[18]);
                $('#aug_real').html(reduceColumn[19]);
                $('#sep_akb').html(reduceColumn[20]);
                $('#sep_real').html(reduceColumn[21]);
                $('#okt_akb').html(reduceColumn[22]);
                $('#okt_real').html(reduceColumn[23]);
                $('#nov_akb').html(reduceColumn[24]);
                $('#nov_real').html(reduceColumn[25]);
                $('#des_akb').html(reduceColumn[26]);
                $('#des_real').html(reduceColumn[27]);

                
            }
        });
    });

colin

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

kthorngren

Not sure what your code is doing but if you are looking to get the filtered rows with column().data() then use the selector-modifier of {search: "applied"}. See the docs for examples.

Kevin

AndiFathul

http://live.datatables.net/weweqaki/3/
@colin @kthorngren i just add a test case, in general I want the sum of age column change whenever the search result change

kthorngren

As I said use the selector-modifier of {search: "applied"} with the column().data() API. For example:
http://live.datatables.net/weweqaki/4/edit

Kevin

AndiFathul

Thanks a lot, @kthorngren !