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

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>

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);
        }

Personally I would be inclined to group these by year first into a new object that can store the row data for that year and while storing it increment that year's total.

Then iterate that new object to build the table. Add the total rows at end of each year iteration

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

var data = [
{month:1, year: 2016, count: 10},
{month:2, year: 2016 , count:75},
{month:12, year:2016, count: 95},
{month:1, year:2017 , count: 47},
{month:4, year: 2017, count:  68}
];

// create a new object with years as keys
var yrsObj = data.reduce((a,c)=>{
   a[c.year] = (a[c.year] || {rows:[], total:0} );
   a[c.year].total += c.count;
   a[c.year].rows.push(c);
   return a
},{});
//console.log(yrsObj);

$.each(yrsObj, function(year, yObj){
   var dataRows = yObj.rows.map(function(rObj){
      var $row = $('<tr>'),
         $cells =['month', 'year','count'].map(function(key){
            var cellVal = (key === 'month') ? arr_bln[rObj.month] : rObj[key];
            return $('<td>', {text:cellVal})
         });
         $row.append($cells)
      return $row
   });
   var $totalRow = $('<tr>',{ class:"total"});
   $totalRow.append($('<td>',{text:'Total', colspan:2}).css('text-align','center'));    
   $totalRow.append($('<td>',{text:yObj.total}));
   
   dataRows.push($totalRow)
   $('table').append(dataRows)
})

.total{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Month</th>
    <th>Year</th>
    <th>Data</th>
  </tr>
</table>

</div>