如何根据ajax成功返回的数据追加一行？

Question

I have an ajax that retrieved data from database and append it to html table. But, I'd like to add a custom row in a specific condition. This is my ajax success:

success  : function(response)
            {
                var tableData,t1,t2,t3;                 
                var count       = 0;

                $.each(response.result_pakai, function(index, rows_pakai){

                    //MONTHS
                    var arr_bln = ["", "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

                    t1  = "<tr><td>"+arr_bln[rows_pakai.month]+"</td>";
                    t2  =     "<td align='center' class='col_thn'>"+rows_pakai.years+"</td>";
                    t3  =     "<td align='right' class='col_data'>xxx</td></tr>";

                    tableData += t1+t2+t3;

                    $('#t_pemakaian tbody tr').remove();
                    $('#t_pemakaian tbody').append(tableData);

                    count+=1;
                });
            }

So, I'd like the custom row for each year. This is my current html table result.

Month       year   data
Januari     2016     10
Februari    2016     75
Desember    2016     95
Januari     2017     47
April       2017     68

This is what I expected:

Month       year   data
Januari     2016     10
Februari    2016     75
Desember    2016     95
     Total          180

Januari     2017     47
April       2017     68
     Total          115

Where in my AJAX the following script should be inserted?

<tr><td colspan='2' class='tr_total'>Total</td><td>&nbsp;</td></tr>

Answer 1

You can use a simple variable to keep track of the current/past year value, and create/display the subtotal row, ie. currentYear. Do this at the start of you loop, so that you can check the current row year vs the last row year.

success  : function(response)
        {
            var tableData,t1,t2,t3;                 
            var count       = 0;
            var currentYear = 0;
            var subTotal = 0;

            $.each(response.result_pakai, function(index, rows_pakai){

                //SUBTOTAL ROW
                if(rows_pakai.years != currentYear && currentYear != 0) {
                    var s1 = "<tr><td colspan='2' class='tr_total'>Total</td><td>"+subTotal+"</td></tr>";
                    subTotal = 0;
                } else {
                    var s1 = "";
                }

                //MONTHS
                var arr_bln = ["", "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];

                t1  = "<tr><td>"+arr_bln[rows_pakai.month]+"</td>";
                t2  =     "<td align='center' class='col_thn'>"+rows_pakai.years+"</td>";
                t3  =     "<td align='right' class='col_data'>xxx</td></tr>";

                //SET TO CURRENT YEAR AND ADD AMOUNT
                currentYear = rows_pakai.years
                subtotal += rows_pakai.[yourColumnName]

                tableData += s1+t1+t2+t3; //include the s1 row

                $('#t_pemakaian tbody tr').remove();
                $('#t_pemakaian tbody').append(tableData);

                count+=1;
            });

            //SUBTOTAL ROW FOR LAST GROUP
            var s2 = "<tr><td colspan='2' class='tr_total'>Total</td><td>"+subTotal+"</td></tr>";
            $('#t_pemakaian tbody').append(s2);
        }