[AJAX] Appel AJAX dans Spring mvc 3 en utilisant Datatable et Dialog

Bonjour à tous,
Je suis débutant en Jquery, AJAX, Spring, et je souhaite creer une pop-up modale de recherche.
Cette pop-up permet de:

Lancer dynamiquement une recherche selon un critère de saisie (la recherche est lancé autaumatiquement à la saisie).
Charger le résultat dans un tableau
Afficher un boutton dans une colone pour chaque résultat
Le clique sur ce boutton, permet de restituer les données du résulat choisi dans l'écran mère + fermeture de la pop-up

J'espère que j'ai pas été trop flou juqu'à présent :pastaper:

Le projet est en Java/JEE avec Spring mvc 3, et j'ai choisi d'utiliser les composant Jquery Datatable (http://datatables.net) qui va permettre de lancer la recherche et afficher les résultat dans une table + Dialog (Jquery UI) qui va afficher le tout dans une pop-up.

J'ai bien crée ma pop-up et elle contient bien mon tableau.

Ce que je souhaite faire actuellement, c'est de faire la liaison entre mon tableau et mon service en AJAX, mais sans scuccè.

Voici mon code:

Ma JSP:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<%@ page language="java" pageEncoding="UTF-8" session="false"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>projet</title>
<link rel='stylesheet' type='text/css'href="ressources/css/CA-BANK-theme/jquery-ui-1.10.1.custom.css">
<script type='text/javascript' src="ressources/js/jquery-1.9.1.js"></script>
<script type='text/javascript' src="ressources/js/jquery-ui-1.10.1.custom.js"></script>
<script type='text/javascript' src="ressources/js/jquery.dataTables.js"></script>
<style type="text/css" title="currentStyle">
@import "ressources/css/data-table-css/table_jui.css";
</style>
<script>
	$(document).ready(function() {
 
		$("#myTable").dataTable({
			"bJQueryUI" : true,
			"sPaginationType" : "full_numbers",
			"iDisplayLength" : 8, 
			"bProcessing" : true,
			"bLengthChange" : false,
			"bAutoWidth": false,
			"oLanguage" : {
				"sUrl" : "ressources/language/fr.txt"
			},
	        "bServerSide": true, 
	        "sAjaxSource": "/recherche", 
	        "fnServerData": function ( sSource, aoData, fnCallback ) { 
	            $.ajax( { 
	                "dataType": 'json',  
	                "type": "GET",  
	                "url": sSource, 
	                "data": aoData,  
	                "success": fnCallback 
	            } ); 
	        } 
 
		});
 
		$("#dialog").dialog({
			autoOpen : false,
			modal : true,
			resizable : false,
			width : 705,
			height : 505,
		});
 
		// Link to open the dialog
		$("#dialog-link").click(function(event) {
			$("#dialog").dialog("open");
			event.preventDefault();
		});
 
	});
</script>
<style>
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}
</style>
</head>
<body>
 
	<div align="center">
		<form id="searchForm" method="POST" action="/select">
			<table style="align: center;">
				<tr>
					<td><input type="button" id="dialog-link" title="Recherche"
						class="ui-bouton_icon" />
					</td>
				</tr>
			</table>
		</form>
	</div>
 
 
	<!-- ui-dialog -->
	<div id="dialog" title="Recherche d'activi&eacute; MP">
		<div id="dynamic">
			<table class="display" id="myTable">
				<thead>
					<tr>
						<th width="18%">Code</th>
						<th width="82%">Libelle</th>
					</tr>
				</thead>
				<tbody>
 
 
				</tbody>
			</table>
		</div>
	</div>
</body>
 
 
</html>

Mon Controleur:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package project.pack.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
 
 
@Controller
public class monController {
 
	@RequestMapping("/")
	public String printHelloWorld(Model model) {
		model.addAttribute("message", "Hello World!");
 
		return "sesameWeb";
	}
 
 
	@RequestMapping(value = "/recherche", method = RequestMethod.GET)
	public @ResponseBody
	String doAjax(@RequestParam int iDisplayStart,
			@RequestParam int iDisplayLength, @RequestParam int iColumns,
			@RequestParam String sSearch, @RequestParam boolean bEscapeRegex,
			@RequestParam boolean bSortable_,
			@RequestParam boolean bSearchable_, @RequestParam String sSearch_,
			@RequestParam boolean bEscapeRegex_,
			@RequestParam int iSortingCols, @RequestParam int iSortCol_,
			@RequestParam String sSortDir_, @RequestParam String sEcho) {   
 
	        //Create the response, a well formed JSON including Datatables required vars. 
	        //e.g. 
	        return 
 
	        "{  \"sEcho\": 2," + 
	        "   \"iTotalRecords\": 2," + 
	        "   \"iTotalDisplayRecords\": 2," + 
	        "   \"aaData\": [" + 
	        "       [" + 
	        "           \"Code NAF\"," + 
	        "           \"Firefox 1.0\"," + 
	        "       ]," + 
	        "       [" + 
	        "           \"Gecko\"," + 
	        "           \"Firefox 1.5\"," + 
	        "       ]" + 
	        "   ]" + 
	        "}"; 
	    }
}

Je suis vraiment perdu, merci beaucoup de votre aide.