AJAX呼び出しの後にJSPページ内のテーブルのvalues属性を更新する

Question

同じページ内の別のテーブルの一部の行をクリックしたときにAJAX要求が行われたときに使用できるテーブルの内容を表示する際に問題があります。 以下は私のJSPページ内のテーブルのコードです。

<table id="previousList" class="table"> 
    <thead> 
    <tr> 
     <th colspan="6">Previous Billing Records</th> 
    </tr> 
    <tr> 
     <th>Bill Number</th> 
     <th>Amount</th> 
    </tr> 
    </thead> 
    <tbody> 
    <c:forEach var="lastBill" items="${previousBills}" varStatus="status"> 
     <tr> 
     <td>${lastBill.billingId}</td> 
     <td>${lastBill.billAmount}</td> 
     </tr> 
    </c:forEach> 
    </tbody> 
</table> 

var jsonData; 
var patientTable = $('#patientsList').DataTable(); 
var table = document.getElementById("selectedPatient"); 

$('#patientsList tbody').on('click', 'tr', function() { 
    var data = patientTable.row(this).data(); 
    console.log("Data " + data); 

    $.ajax({ 
    type: "POST", 
    url: "/LoginMavenSpringMVC/billing/lastBill", 
    data: "patientId=" + data[0], 
    success: function(response) { 
     console.log("Showing the LastBill Details: " + response); 
     jsonData = response; 
    }, 
    error: function(e) { 
     alert('Error: ' + e); 
    } 
    }); 
}); 

次のように私の制御コードです。

@RequestMapping(value="/lastBill") 
public @ResponseBody String lastBill(ModelMap model, String patientId) 
{ 
    System.out.println("ID: " + patientId); 
    Gson gson = new Gson(); 
    Bill b = new Bill(); 
    b.setBillAmount(1000); 
    b.setBillingId("12345SDf"); 
    Collection<Bill> bills = new ArrayList<Bill>(); 
    bills.add(b); 
    model.addAttribute("previousBills",bills); 
    String jsonBills = gson.toJson(bills); 
    model.addAttribute("jsonBills", jsonBills); 
    return jsonBills; 
} 

JSONデータを取得できましたが、値をテーブルにバインドできませんでした。どんな提案/回答も相当なものです。前もって感謝します。

Answer 1

これがうまくいきます。

var jsonData; 
 
    
 
$('#patientsList tbody').on('click', 'tr', function() { 
 
    var data = patientTable.row(this).data(); 
 
    console.log("Data " + data); 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    url: "/LoginMavenSpringMVC/billing/lastBill", 
 
    data: "patientId=" + data[0], 
 
    success: function(response) { 
 
     console.log("Showing the LastBill Details: " + response); 
 
     jsonData = JSON.parse(response); 
 
\t $.each(jsonData, function(i, bill) { 
 
\t \t \t var newRowContent = "<tr><td>"+bill.billingId+"</td><td>"+bill.billAmount+"</td></tr>"; 
 
\t \t \t $("#previousList tbody").append(newRowContent); 
 
     }); 
 
\t 
 
    }, 
 
    error: function(e) { 
 
     alert('Error: ' + e); 
 
    } 
 
    }); 
 
});