如何根據ajax成功返回的數據添加一行？

Question

我有一個從數據庫檢索數據並將其附加到HTML表的ajax。但是，我想在特定條件下添加自定義行。這是我的阿賈克斯成功：

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

所以，我想每年的自定義行。這是我當前的html表結果。

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

這是我所期待的：

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

Januari  2017  47 
April  2017  68 
    Total   115 

凡在我的AJAX以下腳本應插入？

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

Answer 1

您可以使用一個簡單的變量來跟蹤當前/過去year價值，創建/顯示小計行，即。 currentYear。在循環開始時執行此操作，以便您可以檢查當前行年與上一行年份。

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

Answer 2

個人而言，我會傾向於組通過這些年首先進入一個新的對象，可以存儲該年度的行數據，並同時存儲它增加了當年的總。

然後迭代該新對象來構建表。在每年迭代

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>