ajaxの成功で返されたデータに基づいて行を追加する方法は？

Question

私は、データベースからデータを取得し、それをhtmlテーブルに追加するajaxを持っています。しかし、私は特定の条件でカスタム行を追加したいと思います。これは私の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 

これは私が期待したものである：

私のAJAXに次のスクリプトを挿入する必要があります

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

Januari  2017  47 
April  2017  68 
    Total   115 

？あなたはすなわち、小計行を表示/過去/現在year値を追跡し、作成するために、単純な変数を使用することができます

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

Answer 1

。 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

個人Iが最初にその年の行のデータを格納することができる新しいオブジェクトに年グループこれらに傾斜し、その年の合計をインクリメント格納しながらされるであろう。

次に、新しいオブジェクトを反復してテーブルを構築します。反復

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>