Problème avec la pagination

**oseqat** · 20/06/2011, 17h09

Bonjour à tous,
J'utilise le grid d'ExtJs afin d'afficher mes données récupérées depuis une bd sql server via un web service, le retour des données se fait en format JSON, je suis arrivé a faire afficher mes données sur le grid mais je bloque au niveau de la pagination, je retrouve tout mes enregistrements sur la première page même si j'ai bien spécifié la limite a afficher par page ... je ne vois pas d'où peut venir ce problème surtout que je me suis basé sur la doc officielle, merci de votre aide

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
//ExtJs 4
 
Ext.onReady(onReady);
 
function onReady() {
    var itemsPerPage = 10;
    var store = new Ext.data.JsonStore({
        autoLoad: false,
        pageSize: itemsPerPage,
        proxy: new Ext.data.HttpProxy({
            type: 'ajax',
            url: '../Service.asmx/GetMyDvpt',
            reader: {
                type: 'json',
                root: 'd',
                totalProperty: 'total',
                idProperty: 'Id'
            },
            headers: {
                'Content-type': 'application/json'
            }
        }),
        fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
 
    });
 
    store.load({
        params: {
            start: 0,
            limit: itemsPerPage
        }
    });
 
    Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
		            { dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
		            { dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
		            { dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
		            { dataIndex: 'SURF_PG', header: 'SURF_PG' },
                    { dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
		        ],
        renderTo: 'panel',
        title: 'Dvpt Grid',
        width: 570,
        height: 350,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true
        }]
    });
}

**kenny.kev** · 20/06/2011, 18h32

Bonjour,

Je ne suis pas sûr que le problème vienne de extjs mais de ta requête.
As-tu bien le limit (en fonction de la bdd) dans le requête SQL ?

**oseqat** · 20/06/2011, 18h50

Bonjour,
ben en faite je ne vois pas l'intérêt de mettre une limite dans ma requête vu que je dois récupérer toutes les données, c'est juste l'affichage qui doit se faire par bloc de 10 enregistrements par page par exemple

**kenny.kev** · 20/06/2011, 19h10

Extjs ne permet pas de faire ça.
Il est même préférable pour des questions de performances, de n'afficher que les données utiles.

**oseqat** · 21/06/2011, 10h04

Bonjour,
Euh ... je crois qu'il le fait, vu que sur leur exemples ils affichent les données depuis une base mais sous forme de forum ... et je ne vois pas ou pourrai être le problème (logiquement, tant qu'on peut afficher ce dont on a besoin, on peut tout afficher) exemple : si j'ai besoin de 50 enregistrements et que je souhaite en avoir que 10 par page, si cela est faisable après c'est pareil.
Mon souhait c'est juste de pouvoir paginer, limiter le nbr d'enregistrement a afficher par page.

**abraxis** · 21/06/2011, 10h45

Pour limiter le nombre d'enregistrement sur ta page il faut mettre un limit dans ta requête car il n'y a pas de propriété permettant de limiter le nombre de données à afficher dans un grid sans pagination.
Seule la barre de pagination permet de limiter le nombre de données à afficher.
De plus si tu a 5000 résulta, en une seule fois cela risque d'être long...
Avec la pagination (et donc la découpe avec le limit), l'utilisateur ne va faire appel qu'a des "petits" paquets de données donc plus rapide. La pagination s'occupe elle même de renvoyer les infos pour refaire une requête et envoyer la suite des données.

Pour faire de la pagination en local, je cherche aussi à le faire mais pour la simple et bonne raison que je ne peu pas mettre de limit dans ma reqête :s
Tu a une explication pour la pagination en local ici : http://www.developpez.net/forums/d10...ination-local/

**oseqat** · 21/06/2011, 10h50

Bonjour Abraxis,
Merci de ta réponse, bah en faite c'est exactement la même chose pour moi je ne peux pas mettre de limit dans ma requête, l'explication que tu m'as donné est assez vague, ya pas la solution du comment on peut faire :s donc cela ne résout toujours pas mon problème.

**kenny.kev** · 21/06/2011, 17h17

Vous avez un problème de conception si vous rentré dans ce cas la.
J'ai tester une combobox avec 300 enregistrements en une fois et une combobox paginer (j'ai fait le test avec 3000 enregistrements).

C'est tout simplement inutilisable. Si vous avez des paramètres à passer continuellement avec votre pagination il y a cette méthode :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var UhEditStore = new Ext.data.Store({
    storeId: 'uhEditStore',
    model: 'ComboboxModalStore',
    proxy: {
        type: 'direct',
        directFn: liststore.uh
    },
    listeners: {
        beforeload: function () {
            UhEditStore.proxy.extraParams = {
                st_id: Ext.getCmp('idSt').getValue()
            };
        }
    }
});

A chaque appelle vous aurez vos données transmise.

**oseqat** · 22/06/2011, 10h53

Bonjour Kenny,

J'ai rien compris à ta réponse :s enfin l'utilisation, là, je suis arrivé à afficher 10 enregistrements par page, mais le problème c'est que quand je défile d'une page a une autre c'est les même enregistrements :s voilà comment j'ai procédé :

Voici mon code pour y voir plus clair :

**Page: .asmx

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [ScriptService]
    public class Service : System.Web.Services.WebService
    {
 
		public class DataGridSource
        {
            public List<MyDvpt> maListe = new List<MyDvpt>();
 
            private string _total;
            public string Total 
            {
                get { return _total; }
                set {  _total = value; }
            }
        }
 
		[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
        public DataGridSource GetMyDvpt3(int pageSize, int pageNumber)
        {
            string connectionString = "Data source=DARWIN;Initial Catalog=AGREO_DVPT;User ID=temp;Password=pmet";
 
            SqlConnection connection = new SqlConnection(connectionString);
 
            SqlCommand command = new SqlCommand("SELECT TOP 100 E.NOM_EXP,ESP.NOM_ESP,V.NOM_VAR,P.SURF_PG,P.DD_CYCLE_PROD from gc.PG P inner join ADM.EXP E on E.ID_EXP = P.ID_EXP inner join GC.VAR V on V.ID_VAR = P.ID_VAR inner join GC.ESP ESP on ESP.ID_ESP = V.ID_ESP", connection);
 
            connection.Open();
 
            SqlDataReader reader = command.ExecuteReader();
 
            List<MyDvpt> list = new List<MyDvpt>();
            while (reader.Read())
            {
                MyDvpt dev = new MyDvpt();
                dev.NOM_EXP = reader[0].ToString();
                dev.NOM_ESP = reader[1].ToString();
                dev.NOM_VAR = reader[2].ToString();
                dev.SURF_PG = reader[3].ToString();
                dev.DD_CYCLE_PROD = reader[4].ToString();
 
                list.Add(dev);
            }
 
            return new DataGridSource { maListe = list.Skip(pageSize * pageNumber).Take(pageSize).ToList<MyDvpt>(), Total = list.Count.ToString() };
 
        }
		        public class MyDvpt
        {
            public string NOM_EXP { get; set; }
            public string NOM_ESP { get; set; }
            public string NOM_VAR { get; set; }
            public string SURF_PG { get; set; }
            public string DD_CYCLE_PROD { get; set; }
 
            private string _total;
            public string Total
            {
                get { return _total; }
                set { _total = value; }
            }
 
        }
 
	}

**Page: .js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
//ExtJs 4
Ext.onReady(onReady);
 
function onReady() {
    //var itemsPerPage = 10;
store = new Ext.data.JsonStore({
        autoLoad: false,
        pageSize: 10,
        pageNumber: 1,
        groupField: 'NOM_VAR',
        proxy: new Ext.data.HttpProxy({
            method: 'GET',
            type: 'ajax',
            url: '../Service.asmx/GetMyDvpt3?pageSize=10&pageNumber=1',
           // params: {pageSize: 10, pageNumber:1},
            reader: {
                type: 'json',
                root: 'd.maListe',
                totalProperty: 'd.Total',
            },
            headers: {
                'Content-type': 'application/json'
            }
        }),
 
        fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
    });
 
    store.load({
        params: {
            start: 0,
            limit: 10
        }
    });
    Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns: [
                    { dataIndex: 'NOM_EXP', header: 'NOM_EXP', flex: 1 },
                    { dataIndex: 'NOM_ESP', header: 'NOM_ESP', flex: 1 },
                    { dataIndex: 'NOM_VAR', header: 'NOM_VAR', flex: 1 },
                    { dataIndex: 'SURF_PG', header: 'SURF_PG', flex: 1 },
                    { dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
                ],
        renderTo: 'panel',
        title: 'Dvpt Grid',
        width: 1220,
        height: 500,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true
        }]
    });
}

NB : les 10 premiers enregistrements c'est du au fait que j'ai spécifier lors de mon appel url: '../Service.asmx/GetMyDvpt3?pageSize=10&pageNumber=1' pageSize à 10, je ne sais pas comment faire pour récupérer mon params total

Merci de ton aide

**kenny.kev** · 22/06/2011, 22h28

Désolé il est vrai que ce n'est pas vraiment compréhensible.
J'ai fait plusieurs tests :

1 avec 300 résultats affiché dans une combobox
1 avec la pagination dans une combobox
1 avec 3000 résultats sans pagination

Le Résultat est assez flagrant la pagination est vraiment plus rapide et n'alourdit pas la navigation.

Ton problème viens que tu as oublié un paramètre important.
Tu as besoin d'un offset pour indiquer à partie de quel tranche tu souhaite récupérer. regarde dans la console de ton navigateur les paramètres envoyé.

dans extjs le paramètre s'appelle start il est automatiquement gérer tu as juste à le prendre et à l'utiliser dans ta requête. Attention !! tu peux avoir des variantes suivant la base de données que tu te connecte. Exemple :
Les limit en mysql ne ce gère pas de la même façon sur Oracle (mais alors pas du tout).

**oseqat** · 23/06/2011, 10h51

Bonjour Kenny,

Donc là, si j'ai bien compris suffit juste de rajouter une limit au niveau de ma requête c'est bien çà ?

**kenny.kev** · 23/06/2011, 12h17

Bonjour oseqat,

Non tu as déjà fait le limit.
Dans une requête, tu as besoin de 2 paramètres pour faire une pagination :

le limit : permet d'indiquer le nombre de ligne à afficher
l'offset : indique à partir de quelle ligne je dois commencer à retourner mes résultats.

Je ne suis pas un expert SQLServer donc je t'invite à regarder ce lien :
http://www.developpez.net/forums/d42...it-sql-server/

**oseqat** · 23/06/2011, 15h10

Bonjour kenny,
merci bcp pour ton aide, mais je suis toujours perdu, en faite au niveau de mon web service Total prend bien la valeur 100, qui est en fait le nbr de mes enregistrements, si je récupère que les 20 premiers enregistrements c du a mon url dans le proxy d'extjs : url: '../Service.asmx/GetMyDvpt3?pageSize=20 &pageNumber=1' vu que spécifie la valeur de pageSize (en dur) l'idée si possible serait de pouvoir passer ces paramètres sans avoir à les saisir, si j'arrive a récupérer ces paramètres je crois que le problème serait résolu, j'ai déjà testé params:{pageSize: 20, pageNumber: 1} et au niveau de mon store.load({params: {start: 0, limit: 20}}); mais rien ne change c'est toujours le même résultat.
ça m'énerve d'être bloqué comme çà

**kenny.kev** · 23/06/2011, 15h45

En fait ils sont déjà envoyer dans le store par défaut.
Pour vérifier tous les paramètres que tu as lors du chargement de ton store utilise firefox avec firebug.
Tu active l'onglet console puis fait un F5. Ensuite exécute ton load tu devrais obtenir quelque chose comme ça :
image firebug

**oseqat** · 23/06/2011, 16h09

oui oui j'ai quelque chose du genre, sinon tu n'aurais pas une idée pour me débloquer ? ou un projet qui y ressemble et sur le quel je pourrai me baser ?

**kenny.kev** · 23/06/2011, 16h32

Effet la c'est avec le C# ton problème, pas extjs.
Il faudrait que tu affiches les variables que tu reçois dans le C#. Extjs, fait des requêtes ajax en post et non en get.

En voila un exemple : http://dev.sencha.com/deploy/ext-4.0...id/paging.html

**oseqat** · 23/06/2011, 16h38

merci pour l'exemple, je l'avais déjà chécké il ne m'a pas servi a grand chose ... merci comme même

Problème avec la pagination

Ext JS / Sencha

Discussions similaires

Partager

Partager