IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

TableSorter trop long au chargement


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Mars 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2013
    Messages : 5
    Par défaut TableSorter trop long au chargement
    Bonjour,


    J'utilise TableSorter avec symfony2 (je précise même si le problème reste le même ailleurs), je génère un tableau a partir de ma base de données triés et paginés. Tout fonctionne sauf quand le nombre d'entrées d'un ou des tableaux est trop grand et la le chargement est énorme et la page plante des fois car je vois bien que ma page affiche d'abord toutes mes entrées et les pagines seulement après. Je voudrais charger et afficher d'abord la première page de mon tableau et que le reste se charge après en ajax par exemple mais ce que j'ai essayer na rien donné apart des conflits avec tableSorter.

    Code de la vue (.tiwg) :ne vous fiez pas aux noms des colonnes.
    Code html : 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
    69
    70
    71
    72
    73
    <div id="tabs-1">
        <div style="overflow:auto;">
            <table id="tabs1" class="table table-bordered table-striped tablesorter">
                <thead>
                    <tr>
                        <th><div style="width:150px;>1</div></th>
                        <th><div style="width:150px;">2</div></th>
                        <th>3</th>
                        <th>4</div></th>
                        <th><div style="width:40px;">5</div></th>
                        <th><div style="width:100px;">6</div></th>
                        <th><div style="width:60px;">7</div></th>
                        <th><div style="width:60px;">8</div></th>
                        <th><div style="width:150px;">9</div></th>
                        <th><div style="width:100px;">10</div></th>
                    </tr>
                </thead>
                <tbody>
                    {%for info in donnees['info']%}
                    <tr>   
                        <td>
                            {{info[1]}}
                        </td>
                        <td>
                            {{info[2]}}
                        </td>
                        <td>
                            <div style="width:200px;overflow: hidden;text-overflow:ellipsis;">
                                {{info[3]}}
                            </div>
                        </td>
                        <td>
                            <div style="width:150px;overflow: hidden;text-overflow:ellipsis;">
                                {{info[4]}}
                            </div>
                        </td>
                        <td>
                            {{info[5]}}
                        </td>
                        <td>
                            {{info[6]|date("d/m/Y")}}
                        </td>
                        <td>
                            {{info[7]}}
                        </td>
                        <td>
                            {{info[8]}}
                        </td>
                        <td>
                            {{info[9]|date("m-d-Y h:i:s")}}
                        </td>
                        <td>
                            {{info[10]}}
                        </td>
                    {%endfor%}
                    </tr>
                </tbody>
            </table>
        </div>
        <form id="pager" >
            <img src="{{ asset('bundles/monBundle/js/tableSorter/images/first.png') }}" class="first"/>
            <img src="{{ asset('bundles/monBundle/js/tableSorter/images/prev.png') }}" class="prev"/>
            <input type="text" class="pagedisplay"/>
            <img src="{{ asset('bundles/monBundle/js/tableSorter/images/next.png') }}" class="next"/>
            <img src="{{ asset('bundles/monBundle/js/tableSorter/images/last.png') }}" class="last"/>
            <select class="pagesize">
                <option value="10">10 per page</option>
                <option value="2">2 per page</option>
                <option value="5">5 per page</option>
                <option value="15">15 per page</option>
            </select>
        </form>
    </div>

    Voila le script JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     <script>
    $(document).ready(function()
        {
            $("#tabs1").tablesorter()
                       .tablesorterPager({container: $("#pager")});
         });
    </script>

  2. #2
    Membre Expert Avatar de Lorenzo77
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    1 472
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 472
    Par défaut
    salut,

    je ne connais pas "TableSorter" donc je peux pas t'aider mais je te conseillerais de limiter le nombre de lignes que tu peux charger en 1 coup : si ta table a 100000 lignes tu vas pas toutes les charger d'un coup !

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Mars 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2013
    Messages : 5
    Par défaut
    Bonjour,

    Merci de ta réponse Lorenzo, je voudrais limiter le nombre de ligne au chargement a 10 ou 15 en fonction du nombre d'affichage choisis par défaut. Mais j'ai pas réussi, j'ai essayer en ajax d'appeler d'abord une requete qui affiche les 10 premiers et de charger le reste ensuite en faisant 2 requetes différente (Select * From table LIMIT 10 et Select * From Table) mais une fois que tous s'est chargé ca remplace mon tableau donc c'est pas ce que je veux. Si tu as une idée pour charger que 10 ligne, prck pour l'instant j'ai 5000Champs mais dans 2-3 mois j'en aurais peut etre le double ou le triple. Merci

  4. #4
    Membre Expert Avatar de Lorenzo77
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    1 472
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 472
    Par défaut
    si j'ai bien compris tableSorter sert juste a créer les fonctionnalités sur ton tableau HTML, donc il vient a la fin.
    si tu connais la requete pour ne charger que X lignes, alors tu as déja tout compris.
    tu vas devoir rajouter 2 boutons dans ta page, un pour charger les X lignes suivantes et l'autre pour les X lignes précédentes.
    tu fais ca en gardant un ID dans ta page et en l'incrémentant du nombre de lignes max autorisés.
    surement a ca que sert tes boutons ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
            <img src="{{ asset('bundles/monBundle/js/tableSorter/images/first.png') }}" class="first"/>
            <img src="{{ asset('bundles/monBundle/js/tableSorter/images/prev.png') }}" class="prev"/>
            <input type="text" class="pagedisplay"/>
            <img src="{{ asset('bundles/monBundle/js/tableSorter/images/next.png') }}" class="next"/>
            <img src="{{ asset('bundles/monBundle/js/tableSorter/images/last.png') }}" class="last"/>
    maintenant faudrait voir les événements que tu as collé sur dessus (et aussi le code qui fait la requete)


    -----
    le coup des 2 requetes a la suite est .... tu peux zapper cette idée !

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Mars 2013
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2013
    Messages : 5
    Par défaut
    Bonjour,

    Désolé de ma réponse tardive. Oui tableSorter met en page mon tableau de façon a le trié, c'est aussi lui qui gère la pagination, donc les boutons que tu as cité. Le code qui est collé dessus est celui de tableSorterPager.

    Ma requête est celle-ci :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    public function getListeClient($var)
    {      
        $rsm = new ResultSetMapping();
        $rsm->addEntityResult('MonProjet\MonBundle\Entity\Admin', 'a');
        $rsm->addFieldResult('a', 'admin_nom', 'adminNom');
     
        $sql = 'SELECT admin_nom FROM admin a WHERE a.pack = 1';
     
        $query = $this->_em->createNativeQuery($sql, $rsm);
     
        return $query->getArrayResult(); 
    }

    Ici, la fonction va retourné un tableau contenant une colonne par exemple "adminNom". Ensuite je l'affiche en html comme un tableau banal sauf que tableSorter trie et pagine.

    Selon toi en fait, je devrais modifié les boutons qui passe d'une page a l'autre de façon a charger que les bonnes lignes ?
    Je vois pas comment faire, je vais essayer ça mais sinon je pense changer de librairie JS et en prendre une plus adapté.


    P.S : tableSorterPager.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
    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
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    (function($) {
    	$.extend({
    		tablesorterPager: new function() {
     
    			function updatePageDisplay(c) {
    				var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);	
    			}
     
    			function setPageSize(table,size) {
    				var c = table.config;
    				c.size = size;
    				c.totalPages = Math.ceil(c.totalRows / c.size);
    				c.pagerPositionSet = false;
    				moveToPage(table);
    				fixPosition(table);
    			}
     
    			function fixPosition(table) {
    				var c = table.config;
    				if(!c.pagerPositionSet && c.positionFixed) {
    					var c = table.config, o = $(table);
    					/*if(o.offset) {
    						c.container.css({
    							top: o.offset().top + o.height() + 'px',
    							position: 'absolute'
    						});
    					}*/
    					c.pagerPositionSet = true;
    				}
    			}
     
    			function moveToFirstPage(table) {
    				var c = table.config;
    				c.page = 0;
    				moveToPage(table);
    			}
     
    			function moveToLastPage(table) {
    				var c = table.config;
    				c.page = (c.totalPages-1);
    				moveToPage(table);
    			}
     
    			function moveToNextPage(table) {
    				var c = table.config;
    				c.page++;
    				if(c.page >= (c.totalPages-1)) {
    					c.page = (c.totalPages-1);
    				}
    				moveToPage(table);
    			}
     
    			function moveToPrevPage(table) {
    				var c = table.config;
    				c.page--;
    				if(c.page <= 0) {
    					c.page = 0;
    				}
    				moveToPage(table);
    			}
     
     
    			function moveToPage(table) {
    				var c = table.config;
    				if(c.page < 0 || c.page > (c.totalPages-1)) {
    					c.page = 0;
    				}
     
    				renderTable(table,c.rowsCopy);
    			}
     
    			function renderTable(table,rows) {
     
    				var c = table.config;
    				var l = rows.length;
    				var s = (c.page * c.size);
    				var e = (s + c.size);
    				if(e > rows.length ) {
    					e = rows.length;
    				}
     
     
    				var tableBody = $(table.tBodies[0]);
     
    				// clear the table body
     
    				$.tablesorter.clearTableBody(table);
     
    				for(var i = s; i < e; i++) {
     
    					//tableBody.append(rows[i]);
     
    					var o = rows[i];
    					var l = o.length;
    					for(var j=0; j < l; j++) {
     
    						tableBody[0].appendChild(o[j]);
     
    					}
    				}
     
    				fixPosition(table,tableBody);
     
    				$(table).trigger("applyWidgets");
     
    				if( c.page >= c.totalPages ) {
            			moveToLastPage(table);
    				}
     
    				updatePageDisplay(c);
    			}
     
    			this.appender = function(table,rows) {
     
    				var c = table.config;
     
    				c.rowsCopy = rows;
    				c.totalRows = rows.length;
    				c.totalPages = Math.ceil(c.totalRows / c.size);
     
    				renderTable(table,rows);
    			};
     
    			this.defaults = {
    				size: 10,
    				offset: 0,
    				page: 0,
    				totalRows: 0,
    				totalPages: 0,
    				container: null,
    				cssNext: '.next',
    				cssPrev: '.prev',
    				cssFirst: '.first',
    				cssLast: '.last',
    				cssPageDisplay: '.pagedisplay',
    				cssPageSize: '.pagesize',
    				seperator: "/",
    				positionFixed: true,
    				appender: this.appender
    			};
     
    			this.construct = function(settings) {
     
    				return this.each(function() {	
     
    					config = $.extend(this.config, $.tablesorterPager.defaults, settings);
     
    					var table = this, pager = config.container;
     
    					$(this).trigger("appendCache");
     
    					config.size = parseInt($(".pagesize",pager).val());
     
    					$(config.cssFirst,pager).click(function() {
    						moveToFirstPage(table);
    						return false;
    					});
    					$(config.cssNext,pager).click(function() {
    						moveToNextPage(table);
    						return false;
    					});
    					$(config.cssPrev,pager).click(function() {
    						moveToPrevPage(table);
    						return false;
    					});
    					$(config.cssLast,pager).click(function() {
    						moveToLastPage(table);
    						return false;
    					});
    					$(config.cssPageSize,pager).change(function() {
    						setPageSize(table,parseInt($(this).val()));
    						return false;
    					});
    				});
    			};
     
    		}
    	});
    	// extend plugin scope
    	$.fn.extend({
            tablesorterPager: $.tablesorterPager.construct
    	});
     
    })(jQuery);

  6. #6
    Membre Expert Avatar de Lorenzo77
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    1 472
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 472
    Par défaut
    bizarrement je vois des méthodes "moveToFirstPage", "moveToNextPage", ... dans tableSorter mais il ne s'occupe pas des requetes ... donc oui tu as des modifs a faire.

    déja commencer par définir 2 vars :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    nbLignesParPage = 50;//nb max de lignes a charger et afficher
    idPage = 1;// ta position dans les pages
    et utiliser les valeurs de ces vars pour reformuler ta requete (faudra envoyer les vars a ton PHP en GET ou POST) :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $position = (int) $_GET['nbLignesParPage'] * (int) $_GET['idPage'];
    $maxLignes = $_GET['nbLignesParPage'];
    $sql = 'SELECT admin_nom FROM admin a WHERE a.pack = 1 LIMIT ' . $position . ', ' . $maxLignes . ';'

    quand l'utilisateur clique sur le bouton +1 ou -1 tu incrémentes ou décrementes idPage et tu relances la requete (juste tester avant que tu ne passes pas en dessous de 1 ou au dessus du nombre de pages).
    il te faudra donc faire une requete au début pour connaitre le nombre total de lignes dans ta table MySQL (a diviser par le nombre de lignes par page afin de connaitre le nombre total de pages) et d'utiliser cette valeur sur le bouton qui te permet de te deplacer a la fin.



    je trouve étonnant que le tableSorter ne gère pas du tout les requêtes ou ne possède pas un systeme qui pourrait t'aider a ce niveau, car tu ne charges jamais 1000 lignes ou plus dans un tableau, c'est trop lourd .

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 19
    Dernier message: 01/02/2008, 11h54
  2. Chargement trop long tree
    Par lil_k123 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 09/07/2007, 16h17
  3. Temps de chargement trop long pour animation légère
    Par CharlyMops dans le forum Flash
    Réponses: 1
    Dernier message: 27/09/2006, 07h13
  4. Réponses: 5
    Dernier message: 15/09/2006, 16h58
  5. Chargement de page trop long
    Par t_o_7_ dans le forum ASP
    Réponses: 2
    Dernier message: 19/09/2003, 18h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo