Pagination dans une grille AJAX

Version imprimable

Bonjour,

Eh oui, encore un problème...Un soucis de pagination dans une grille. Je charge mes données depuis le serveur sans soucis, mais à l'affichage, tous les résultats sont affichés dans la première page, bien que la toolbar du bas m'indique correctement le nombre de pages que je devrais avoir (et je peux naviguer dedans, mais tous les résultats s'affichent à chaque fois).Ci-dessous le code correspondant :

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
 
var store = new Ext.data.Store({
     proxy : new Ext.data.HttpProxy({
          url: 'monURL/monAction.do?method=loadXmlData'
          // pointe vers une action Struts sur le serveur
     }),
     reader : new Ext.data.XmlReader({
          record: 'record',
          totalRecords: 'total'
     }, [
          {name: 'monNom01', type: 'float'},
          // une dizaine comme ça
     ])
});
store.load({params: {start: 0, limit: 10}});
var grille = new Ext.grid.GridPanel({
     // Configuration de ma grille
     store: store,
     bbar: new Ext.PagingToolbar({
          pageSize: 10,
          store: store,
          displayInfo: true,
          displayMsg: 'Résultats {0} - {1} sur {2}',
          emptyMsg: 'Pas de résultats'
     })
});

C'est la suite du thread que j'avais lancé ici pour ceux que ça intéresse.

Mako

Edit: J'ai légèrement modifié mon code (XmlStore au lieu de Store) mais sans plus de résultat

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var store = new Ext.data.XmlStore({
     url: 'monURL/monAction.do?method=loadXmlData'
     // pointe vers une action Struts sur le serveur
     record: 'record',
     totalRecords: 'total'
     fields: [
          {name: 'monNom01', type: 'float'},
          // une dizaine comme ça
     ])
});
store.load({params: {start: 0, limit: 10}});
var grille = new Ext.grid.GridPanel({
     // Configuration de ma grille
     store: store,
     bbar: new Ext.PagingToolbar({
          pageSize: 10,
          store: store,
          displayInfo: true,
          displayMsg: 'Résultats {0} - {1} sur {2}',
          emptyMsg: 'Pas de résultats'
     })
});

Suite à une réponse sur le forum de Ext JS, j'ai appris d'où venait le problème. En fait, avec le code en l'état, c'est le serveur qui devrait s'occuper d'envoyer uniquement les données correspondant à la page. Pour contrer cela, je fais donc la pagination en local, ce qui donne, avec ce plugin (fichier PagingStore3_v0.4.1 zip), avec le code suivant :
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 var store = new Ext.ux.data.PagingStore({ url: 'monURL/monAction.do?method=loadXmlData' // pointe vers une action Struts sur le serveur autoLoad: {params: {start: 0, limit: 10}}, reader: new Ext.data.XmlReader({ record: 'record', totalRecords: 'total' }, [ {name: 'monNom01', type: 'float'}, // une dizaine comme ça ]) }); var grille = new Ext.grid.GridPanel({ // Configuration de ma grille store: store, bbar: new Ext.PagingToolbar({ pageSize: 10, store: store, displayInfo: true, displayMsg: 'Résultats {0} - {1} sur {2}', emptyMsg: 'Pas de résultats' }) });
Le soucis, c'est que au départ, toutes mes données sont chargées ce qui peut être un peu lent au démarrage. Par contre, comme les données sont en local par la suite, le changement de pages se fait instantanément.

Pour rester dans l'idée de départ, j'aimerai réussir à passer les paramètres de start et limit au serveur, mais je ne vois pas trop comment faire. Si quelqu'un a une idée...

Mako

En creusant un peu, j'ai trouvé la réponse à ma question. Pour passer des paramètres au serveur, j'ai fait comme ceci. Côté client :
Code:

1 2 store.load({params: {start: 0, limit: 10}}); // ou la même chose avec un autoload
Côté serveur, dans mon code JAVA:
Code:

1 2 3 int start = Integer.parseInt(request.getParameter("start")); int limit = Integer.parseInt(request.getParameter("limit"));
Mako