[AJAX] Mettre à jour un table après un click

j'essai de mettre a jour une table de resultat dans ma page jsp avec spring mvc.
la table charge au debut tous les resultats possible mais je veux qu'il me charge juste les resultat trouvés apres une recherche.

ma table:

Code:

1
2
3
4
5
6
7
8
9
10
<table id="table_grid">
[...]
<c:forEach items="${cardlist}" var="card" >
<tr>
    <td>${card.name}</td>
    [...]
</tr>
</c:forEach>            
[...]
</table>

mon formulaire de recherche:

Code:

1
2
3
4
5
6
7
<form:form modelAttribute="searchform" id="formSearch" action="#">
<form:select path="critere" >
  <option value="1">name</option> 
  [...]
</form:select>
<form:input type="text" path="value"/>
<input type="button" value="Search" onclick="searchAjax()"/>

L'appel de la fonction ajax:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function searchAjax() {
$.ajax({
    url : 'searchlostcard',
    type: 'POST',
    data:$('#formSearch').serialize(),
    success : function(responce) {   
 
        /* que mettre ici pour mettre a jour ma table <table id="table_grid"> */
 
    },      
    error : function(){
        alert("error");
    }
});

mon controller spring mvc

Code:

1
2
3
4
5
6
7
8
@RequestMapping(value="/searchlostcard") 
public  @ResponseBody
void searchlostcard(@ModelAttribute(value="searchform") SearchForm searchForm) {    
 
List<Lostcard> listlostcard = lostcardRepository.findByNom(searchForm.getValue());
 
/*comment mettre a jour la variable cardlist ? */
}