change c:forEach list items using javascript

Question

I have a jsp page with JSTL tags.The jsp page contain 2 different tab.If the user click first tab,then want to show a table with tbody contain list of values.That works fine.Now I want to change the c:forEach items when the user click the second tab.The two tab list contain same parameters with different values.So I need to change the items of c:forEach using javascript. Is this possible ?

Thanking you

In jsp

<table id="dynamic-table">
<thead>
<tr>
<th>Sl.No.</th>
<th class="sorting_disabled">Loan Id</th>
<th class="sorting_disabled">Name</th>
</tr>
</thead>
<tbody> 
<c:forEach var="mainlist" items="${S1List}" varStatus="status">
<tr>
<td class="center">${status.index + 1}</td>
<td>${mainlist.loanId}</td>
<td>${mainlist.name}</td>
</tr>
</tbody>
</table>

I want to change the items="${S1List}" to items="${S2List}" using javascript

Javascript

funcion changevalueWhenSecondTabclick(){
//I want the solution code here
}

Muthu vignesh k Muthu vignesh k · Accepted Answer · 2017-07-28T12:37:14

You can able to achieve this using Jquery. You should store the S2List in jquery variable. In my view i will achieve this as follows

$(document).ready(function() {
  //This part let's you to store the list in Java script variable
  var list2ObjectValue="${S2List}";

  funcion changevalueWhenSecondTabclick(){
     //I want the solution code here
     $('#dynamic-table tbody').empty();
     $.each( list2ObjectValue, function( index, value ){
        $('#dynamic-table').append('<tr>'
               +'<td class="center">' + index + '</td>'
               +'<td>' + value.loanId + '</td>'
               +'<td>' + value.name + '</td>'
               +'</tr>');
   });
  }
});

Try the same way when 1st tab is clicked.

change c:forEach list items using javascript

1 Answers