JQuery et DBGRID avec une base de données Oracle XE 10

Bonjour tous le monde, et longue vie au site.

Voila je cherche une solution à mon problème. J'utilise Delphi XE2 et une base données Oracle XE10, je voudrais afficher une requête sql sur une page web, alors j'ai crée un projet WebBroken, en suivant une vidéo.
j'ai pu afficher ma requête sql sur une page web mais le problème et que le résultat et que la grille se rempli uniquement du dernier enregistrement.
voici ma fonction de j'ai utiliser plus le contenu de la pageProcuder.
j'espère trouver mieux pour afficher ma requête. Merci
1 - Fonction:

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
function TDataModuleHtml.GetCustomerList: String;
  Var Ch : Char;
      S, NbRec : String;
begin
  Result :='';
  Ch := ' ';
  EcrComp.Open;
  NbRec:=Inttostr(EcrComp.recordcount);
  Try
    while Not EcrComp.Eof do
      Begin
        Result := '';
        Result :=
            'rows.push({ Num_Emp: '+ EcrCompNUM_EMP.AsString +''
            +',Libelle: '+QuotedStr(EcrCompLIBELLE.AsString)+''
            +',Raisoc: '+QuotedStr(EcrCompRAISOC.AsString)+''
            +',Credit: '+QuotedStr(EcrCompCREDIT.AsString)+''
            +'                });';
             EcrComp.Next;
      End;
 
  Finally
    EcrComp.Close;
  End;
end;
 
function TDataModuleHtml.GetBody: string;
begin
  Result :=
 '	function getData(){'
+'          var rows = [];'
+ GetCustomerList
//+'            }'
+'            return rows;'
+'        }';
end;
 
end.

2 - PageProducer: Composent d'Internet Delphi

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Liste de la Journée Comptable</h2>
    <div style="margin:20px 0;"></div>
 
    <table id="dg" title="Journée Comptable" style="width:800px;height:550px" data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pageSize:10">
        <thead>
            <tr>
                <th field="Num_Emp" width="100">No Employeur</th>
                <th field="Libelle" width="200">Libelle</th>
                <th field="Raisoc" width="300">Raison Social</th>
                <th field="Credit" width="100" align="right">Montant Credit</th>
            </tr>
        </thead>
    </table>
    <script>
       <#docbody>
 
        $(function(){
            $('#dg').datagrid({data:getData()}).datagrid('clientPaging');
        });
    </script>
</body>
</html>