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

Bibliothèques & Frameworks Discussion :

Deux scripts avec prototype


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut Deux scripts avec prototype
    Bonjour tout le monde,

    Au vue des réponses très satisfaisantes que j'ai eu de votre part, je me permets de revenir vous interroger sur un point qui me pose problème.

    Je met à jour un tableau (script présenté dans l'autre post quand j'avais un problème). Pour le mettre à jour, j'utilise un update('mon_id_tableau'); et tout fonctionne correctement sauf que si à ce tableau je veux lui attribuer des fonctions de tri & un scroll à partir de la Xième ligne, et bien là ça ne fonctionne plus.

    Le script s'appelle simplement en faisant un class="scroll table" ...

    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
     
    	<table id="aff_lot" style=" display:none;">
    			<thead>
    		<tr>
    			<th style="width:15px;"></th>
    			<th style="width:45px;"></th>
                    </tr>
    			</thead>
     
    			<tbody>  
    		<tr>
    			<td></td>
    			<td></td>
                    </tr>
    			</tbody>			
    		</table>
    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
     
    function refreshTable(donnees)
    {
    	donnees = $(donnees);
     
    	var table = $('aff_lot'),	
    	th = table.select('thead')[0].select('th'),
    	tableaulot = [], retour = "";
     
    	table.style.display = "block";
     
    	for(var i = 0, l = th.length; i < l; i++) {
    		tableaulot.push(th[i].innerHTML);
    	}
    	for(var i = 0, l = (donnees.length < 30) ? donnees.length : 30; i < l; i++) {
     
    			var nb = '';
    			var retour = '';
     
    			donnees.each( 
    		function (reponses)
            {		
    		retour += "<tr><td> test </td></tr>";
    		nb++;
    		}
    		);
    	}
    	if(donnees.length > 0) {
    	table.select('tbody')[0].update(retour);
    	}
    	else { 
    	table.select('tbody')[0].update("<tr><td colspan='10'><p style='font-size:14px; text-align:center; color:midnightblue;'><strong>Aucune réponse </p></td></tr>");
    	}
     
    }
    Voila, tout le code fonctionne correctement mais si je rajoute ma class="sortable scroll" alors là il ne fonctionne plus.

    PS : Le sortable scroll fonctionne sur un tableau en dur ...

    merci à vous

  2. #2
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Pour être sûr d'avoir bien compris :
    Quand tu créé un tableau en dur avec comme classe css "scroll table", ton tableau devient triable et scrollable tout seul.
    Quand tu construis dynamiquement ton tableau, ca ne le fait plus.

    C'est une librairie javascript qui rend triable/scrollable les tableaux qui ont ces classes css. Elle se lance à un moment (probablement au load de la page) pour cela. C'est surement ca ton problème... peut etre tu peux forcer l'appel de la librairie

  3. #3
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut
    Oui tu as bien compris, comment forcer la librairie ?

    Ma librairie se charge page_recherche.php. Sur celle-ci l'utilisateur renseigne des critères, ceux-ci sont envoyés par ajax à une autre page PHP qui retourne son résultat à JS. JS affiche alors mon tableau mais que je définisse en dur la class="sortable scroll" ou bien directement dans JS, cela ne change rien :'(

  4. #4
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Citation Envoyé par Ben86 Voir le message
    Oui tu as bien compris, comment forcer la librairie
    Montre nous la libairie

  5. #5
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut
    Avec plaisir :

    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
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
     
    /*
    *
    * Copyright (c) 2006 Andrew Tetlaw 
    * http://tetlaw.id.au/view/blog/table-sorting-with-prototype/
    * 
    * Permission is hereby granted, free of charge, to any person
    * obtaining a copy of this software and associated documentation
    * files (the "Software"), to deal in the Software without
    * restriction, including without limitation the rights to use, copy,
    * modify, merge, publish, distribute, sublicense, and/or sell copies
    * of the Software, and to permit persons to whom the Software is
    * furnished to do so, subject to the following conditions:
    * 
    * The above copyright notice and this permission notice shall be
    * included in all copies or substantial portions of the Software.
    * 
    * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
    * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
    * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
    * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
    * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
    * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
    * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    * SOFTWARE.
    * * 
    */
     
    var SortableTable = {
    	init : function(elm, o){
    		var table = $(elm);
    		if(table.tagName != "TABLE") return;
    		if(!table.id) table.id = "sortable-table-" + SortableTable._count++;
    		Object.extend(SortableTable.options, o || {} );
    		var doscroll = (SortableTable.options.tableScroll == 'on' || (SortableTable.options.tableScroll == 'class' && table.hasClassName(SortableTable.options.tableScrollClass)));
    		var sortFirst;
    		var cells = SortableTable.getHeaderCells(table);
    		cells.each(function(c){
    			c = $(c);
    			if(!doscroll) {
    				Event.observe(c, 'click', SortableTable._sort.bindAsEventListener(c));
    				c.addClassName(SortableTable.options.columnClass);
    			}
    			if(c.hasClassName(SortableTable.options.sortFirstAscendingClass) || c.hasClassName(SortableTable.options.sortFirstDecendingClass)) sortFirst = c;
    		});
     
    		if(sortFirst) {
    			if(sortFirst.hasClassName(SortableTable.options.sortFirstAscendingClass)) {
    				SortableTable.sort(table, sortFirst, 1);
    			} else {
    				SortableTable.sort(table, sortFirst, -1);
    			}
    		} else { // just add row stripe classes
    			var rows = SortableTable.getBodyRows(table);
    			rows.each(function(r,i) {
    				SortableTable.addRowClass(r,i);
    			});
    		}
    		if(doscroll) SortableTable.initScroll(table);
    	},
    	initScroll : function(elm){
    		var table = $(elm);
    		if(table.tagName != "TABLE") return;
    		table.addClassName(SortableTable.options.tableScrollClass);
     
    		var w = table.getDimensions().width;
     
    		table.setStyle({
    			'border-spacing': '0',
    			'table-layout': 'fixed',
    			width: w + 'px'
    		});
     
    		var cells = SortableTable.getHeaderCells(table);
    		cells.each(function(c,i){
    			c = $(c);
    			var cw = c.getDimensions().width;
    			c.setStyle({width: cw + 'px'});
    			$A(table.tBodies[0].rows).each(function(r){
    				$(r.cells[i]).setStyle({width: cw + 'px'});
    			})
    		})	
     
    		// Fixed Head
    		var head = (table.tHead && table.tHead.rows.length > 0) ? table.tHead : table.rows[0];
    		var hclone = head.cloneNode(true);
     
    		var hdiv = $(document.createElement('div'));
    		hdiv.id = table.id + '-head';
    		table.parentNode.insertBefore(hdiv, table);
    		hdiv.setStyle({
    			overflow: 'hidden'
    		});
    		var htbl = $(document.createElement('table'));
    		htbl.setStyle({
    			'border-spacing': '0',
    			'table-layout': 'fixed',
    			width: w + 'px'
    		});
    		hdiv.appendChild(htbl);
    		hdiv.addClassName('scroll-table-head');
     
    		table.removeChild(head);
    		htbl.appendChild(hclone);
     
    		cells = SortableTable.getHeaderCells(htbl);
    		cells.each(function(c){
    			c = $(c);
    			Event.observe(c, 'click', SortableTable._sortScroll.bindAsEventListener(c));
    			c.addClassName(SortableTable.options.columnClass);
    		});	
     
    		// Table Body
    		var cdiv = $(document.createElement('div'));
    		cdiv.id = table.id + '-body';
    		table.parentNode.insertBefore(cdiv, table);
    		cdiv.setStyle({
    			overflow: 'auto'
    		});
    		cdiv.appendChild(table);
    		cdiv.addClassName('scroll-table-body');
     
    		hdiv.scrollLeft = 0;
    		cdiv.scrollLeft = 0;
     
    		Event.observe(cdiv, 'scroll', SortableTable._scroll.bindAsEventListener(table), false);
    		if(table.offsetHeight - cdiv.offsetHeight > 0){
    			cdiv.setStyle({width:(cdiv.getDimensions().width + 16) + 'px'})
    		}
    	},
    	_scroll: function(){
            $(this.id + '-head').scrollLeft  = $(this.id + '-body').scrollLeft;
        },
    	_sort : function(e) {
    		SortableTable.sort(null, this);
    	},
    	_sortScroll : function(e) {	
    		var hdiv = $(this).up('div.scroll-table-head');
    		var id = hdiv.id.match(/^(.*)-head$/);
    		SortableTable.sort($(id[1]), this);
    	},
    	sort : function(table, index, order) {
    		var cell;
    		if(typeof index == 'number') {
    			if(!table || (table.tagName && table.tagName != "TABLE")) return;
    			index = Math.min(table.rows[0].cells.length, index);
    			index = Math.max(1, index);
    			index -= 1;
    			cell = (table.tHead && table.tHead.rows.length > 0) ? $(table.tHead.rows[table.tHead.rows.length-1].cells[index]) : $(table.rows[0].cells[index]);
    		} else {
    			cell = $(index);
    			table = table ? $(table) : table = cell.up('table');
    			index = SortableTable.getCellIndex(cell)
    		}
    		var op = SortableTable.options;
     
    		if(cell.hasClassName(op.nosortClass)) return;	
    		order = order ? order : (cell.hasClassName(op.descendingClass) ? 1 : -1);
     
    		var hcells = SortableTable.getHeaderCells(null, cell);
    		$A(hcells).each(function(c,i){
    			c = $(c);
    			if(i == index) {
    				if(order == 1) {
    					c.removeClassName(op.descendingClass);
    					c.addClassName(op.ascendingClass);
    				} else {
    					c.removeClassName(op.ascendingClass);
    					c.addClassName(op.descendingClass);
    				}
    			} else {
    				c.removeClassName(op.ascendingClass);
    				c.removeClassName(op.descendingClass);
    			}
    		});
     
    		var rows = SortableTable.getBodyRows(table);
    		var datatype = SortableTable.getDataType(cell,index,table);
    		rows.sort(function(a,b) {
    			return order * SortableTable.types[datatype](SortableTable.getCellText(a.cells[index]),SortableTable.getCellText(b.cells[index]));
    		});
     
    		rows.each(function(r,i) {
    			table.tBodies[0].appendChild(r);
    			SortableTable.addRowClass(r,i);
    		});
    	},
    	types : {
    		number : function(a,b) {
    			// This will grab the first thing that looks like a number from a string, so you can use it to order a column of various srings containing numbers.
    			var calc = function(v) {
    				v = parseFloat(v.replace(/^.*?([-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?).*$/,"$1"));
    				return isNaN(v) ? 0 : v;
    			}
    			return SortableTable.compare(calc(a),calc(b));
    		},
    		text : function(a,b) {
    			return SortableTable.compare(a ? a.toLowerCase() : '', b ? b.toLowerCase() : '');
    		},
    		casesensitivetext : function(a,b) {
    			return SortableTable.compare(a,b);
    		},
    		datasize : function(a,b) {
    			var calc = function(v) {
    				var r = v.match(/^([-+]?[\d]*\.?[\d]+([eE][-+]?[\d]+)?)\s?([k|m|g|t]?b)?/i);
    				var b = r[1] ? Number(r[1]).valueOf() : 0;
    				var m = r[3] ? r[3].substr(0,1).toLowerCase() : '';
    				switch(m) {
    					case  'k':
    						return b * 1024;
    						break;
    					case  'm':				
    						return b * 1024 * 1024;
    						break;
    					case  'g':
    						return b * 1024 * 1024 * 1024;
    						break;
    					case  't':
    						return b * 1024 * 1024 * 1024 * 1024;
    						break;
    				}
    				return b;
    			}
    			return SortableTable.compare(calc(a),calc(b));
    		},
    		'date-au' : function(a,b) {
    			var calc = function(v) {
    				var r = v.match(/^(\d{2})\/(\d{2})\/(\d{4})\s?(?:(\d{1,2})\:(\d{2})(?:\:(\d{2}))?\s?([a|p]?m?))?/i);
    				var yr_num = r[3];
    				var mo_num = parseInt(r[2])-1;
    				var day_num = r[1];
    				var hr_num = r[4] ? r[4] : 0;
    				if(r[7] && r[7].toLowerCase().indexOf('p') != -1) {
    					hr_num = parseInt(r[4]) + 12;
    				}
    				var min_num = r[5] ? r[5] : 0;
    				var sec_num = r[6] ? r[6] : 0;
    				return new Date(yr_num, mo_num, day_num, hr_num, min_num, sec_num, 0).valueOf();
    			}
    			return SortableTable.compare(a ? calc(a) : 0, b ? calc(b) : 0);
    		},
    		'date-us' : function(a,b) {
    			var calc = function(v) {
    				var r = v.match(/^(\d{2})\/(\d{2})\/(\d{4})\s?(?:(\d{1,2})\:(\d{2})(?:\:(\d{2}))?\s?([a|p]?m?))?/i);
    				var yr_num = r[3];
    				var mo_num = parseInt(r[1])-1;
    				var day_num = r[2];
    				var hr_num = r[4] ? r[4] : 0;
    				if(r[7] && r[7].toLowerCase().indexOf('p') != -1) {
    					hr_num = parseInt(r[4]) + 12;
    				}
    				var min_num = r[5] ? r[5] : 0;
    				var sec_num = r[6] ? r[6] : 0;
    				return new Date(yr_num, mo_num, day_num, hr_num, min_num, sec_num, 0).valueOf();
    			}
    			return SortableTable.compare(a ? calc(a) : 0, b ? calc(b) : 0);
    		},
    		'date-eu' : function(a,b) {
    			var calc = function(v) {
    				var r = v.match(/^(\d{2})-(\d{2})-(\d{4})/);
    				var yr_num = r[3];
    				var mo_num = parseInt(r[2])-1;
    				var day_num = r[1];
    				return new Date(yr_num, mo_num, day_num).valueOf();
    			}
    			return SortableTable.compare(a ? calc(a) : 0, b ? calc(b) : 0);
    		},
    		'date-iso' : function(a,b) {
    			// http://delete.me.uk/2005/03/iso8601.html ROCK!
    			var calc = function(v) {
    			    var d = v.match(/([\d]{4})(-([\d]{2})(-([\d]{2})(T([\d]{2}):([\d]{2})(:([\d]{2})(\.([\d]+))?)?(Z|(([-+])([\d]{2}):([\d]{2})))?)?)?)?/);
     
    			    var offset = 0;
    			    var date = new Date(d[1], 0, 1);
     
    			    if (d[3]) { date.setMonth(d[3] - 1) ;}
    			    if (d[5]) { date.setDate(d[5]); }
    			    if (d[7]) { date.setHours(d[7]); }
    			    if (d[8]) { date.setMinutes(d[8]); }
    			    if (d[10]) { date.setSeconds(d[10]); }
    			    if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); }
    			    if (d[14]) {
    			        offset = (Number(d[16]) * 60) + Number(d[17]);
    			        offset *= ((d[15] == '-') ? 1 : -1);
    			    }
    			    offset -= date.getTimezoneOffset();
    			    if(offset != 0) {
    			    	var time = (Number(date) + (offset * 60 * 1000));
    			    	date.setTime(Number(time));
    			    }
    				return date.valueOf();
    			}
    			return SortableTable.compare(a ? calc(a) : 0, b ? calc(b) : 0);
     
    		},
    		date : function(a,b) { // must be standard javascript date format
    			if(a && b) {
    				return SortableTable.compare(new Date(a),new Date(b));
    			} else {
    				return SortableTable.compare(a ? 1 : 0, b ? 1 : 0);
    			}
    			return SortableTable.compare(a ? new Date(a).valueOf() : 0, b ? new Date(b).valueOf() : 0);
    		},
    		time : function(a,b) {
    			var d = new Date();
    			var ds = d.getMonth() + "/" + d.getDate() + "/" + d.getFullYear() + " "
    			return SortableTable.compare(new Date(ds + a),new Date(ds + b));
    		},
    		currency : function(a,b) {
    			a = parseFloat(a.replace(/[^-\d\.]/g,''));
    			b = parseFloat(b.replace(/[^-\d\.]/g,''));
    			return SortableTable.compare(a,b);
    		}
    	},
    	compare : function(a,b) {
    		return a < b ? -1 : a == b ? 0 : 1;
    	},
    	detectors : $A([
    		{re: /[\d]{4}-[\d]{2}-[\d]{2}(?:T[\d]{2}\:[\d]{2}(?:\:[\d]{2}(?:\.[\d]+)?)?(Z|([-+][\d]{2}:[\d]{2})?)?)?/, type : "date-iso"}, // 2005-03-26T19:51:34Z
    		{re: /^sun|mon|tue|wed|thu|fri|sat\,\s\d{1,2}\sjan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec\s\d{4}(?:\s\d{2}\:\d{2}(?:\:\d{2})?(?:\sGMT(?:[+-]\d{4})?)?)?/i, type : "date"}, //Mon, 18 Dec 1995 17:28:35 GMT 
    		{re: /^\d{2}-\d{2}-\d{4}/i, type : "date-eu"},
    		{re: /^\d{2}\/\d{2}\/\d{4}\s?(?:\d{1,2}\:\d{2}(?:\:\d{2})?\s?[a|p]?m?)?/i, type : "date-au"},
    		{re: /^\d{1,2}\:\d{2}(?:\:\d{2})?(?:\s[a|p]m)?$/i, type : "time"},
    		{re: /^[$£¥€¤]/, type : "currency"}, // dollar,pound,yen,euro,generic currency symbol
    		{re: /^[-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?\s?[k|m|g|t]b$/i, type : "datasize"},
    		{re: /^[-+]?[\d]*\.?[\d]+(?:[eE][-+]?[\d]+)?/, type : "number"},
    		{re: /^[A-Z]+$/, type : "casesensitivetext"},
    		{re: /.*/, type : "text"}
    	]),
    	addSortType : function(name, sortfunc) {
    		SortableTable.types[name] = sortfunc;
    	},
    	addDetector : function(rexp, name) {
    		SortableTable.detectors.unshift({re:rexp,type:name});
    	},
    	getBodyRows : function(table) {
    		table = $(table);
    		return (table.hasClassName(SortableTable.options.tableScrollClass) || table.tHead && table.tHead.rows.length > 0) ? 
    					$A(table.tBodies[0].rows) : $A(table.rows).without(table.rows[0]);
    	},
    	addRowClass : function(r,i) {
    		r = $(r)
    		r.removeClassName(SortableTable.options.rowEvenClass);
    		r.removeClassName(SortableTable.options.rowOddClass);
    		r.addClassName(((i+1)%2 == 0 ? SortableTable.options.rowEvenClass : SortableTable.options.rowOddClass));
    	},
    	getHeaderCells : function(table, cell) {
    		if(!table) table = $(cell).up('table');
    		return $A((table.tHead && table.tHead.rows.length > 0) ? table.tHead.rows[table.tHead.rows.length-1].cells : table.rows[0].cells);
    	},
    	getCellIndex : function(cell) {
    		return $A(cell.parentNode.cells).indexOf(cell);
    	},
    	getCellText : function(cell) {
    		if(!cell) return "";
    		return cell.textContent ? cell.textContent : cell.innerText;
    	},
    	getDataType : function(cell,index,table) {
    		cell = $(cell);
    		var t = cell.classNames().detect(function(n){ // first look for a data type classname on the heading row cell
    			return (SortableTable.types[n]) ? true : false;
    		});
    		if(!t) {
    			var i = index ? index : SortableTable.getCellIndex(cell);
    			var tbl = table ? table : cell.up('table')
    			cell = tbl.tBodies[0].rows[0].cells[i]; // grab same index cell from second row to try and match data type
    			t = SortableTable.detectors.detect(function(d){return d.re.test(SortableTable.getCellText(cell));})['type'];
    		}
    		return t;
    	},
    	setup : function(o) {
    		Object.extend(SortableTable.options, o || {} )
    		 //in case the user added more types/detectors in the setup options, we read them out and then erase them
    		 // this is so setup can be called multiple times to inject new types/detectors
    		Object.extend(SortableTable.types, SortableTable.options.types || {})
    		SortableTable.options.types = {};
    		if(SortableTable.options.detectors) {
    			SortableTable.detectors = $A(SortableTable.options.detectors).concat(SortableTable.detectors);
    			SortableTable.options.detectors = [];
    		}
    	},
    	options : {
    		autoLoad : true,
    		tableSelector : ['table.sortable'],
    		columnClass : 'sortcol',
    		descendingClass : 'sortdesc',
    		ascendingClass : 'sortasc',
    		nosortClass : 'nosort',
    		sortFirstAscendingClass : 'sortfirstasc',
    		sortFirstDecendingClass : 'sortfirstdesc',
    		rowEvenClass : 'roweven',
    		rowOddClass : 'rowodd',
    		tableScroll : 'on',   // off | on | class;
    		tableScrollClass : 'scroll'
    	},
    	_count : 0,
    	load : function() {
    		if(SortableTable.options.autoLoad) {
    			$A(SortableTable.options.tableSelector).each(function(s){
    				$$(s).each(function(t) {
    					SortableTable.init(t, {tableScroll : SortableTable.options.tableScroll});
    				});
    			});
    		}
    	}
    }
     
    if(window.FastInit) {
    	FastInit.addOnLoad(SortableTable.load);
    } else {
    	Event.observe(window, 'load', SortableTable.load);
    }

  6. #6
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    A la fin de refreshTable, essaye de faire ca :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    function refreshTable () {
      // ...
      SortableTable.init(table, {tableScroll : SortableTable.options.tableScroll});
    }

  7. #7
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut
    Parfait merci beaucoup

    C'est donc comme ça que l'on "force" la librairie ?

    Merci encore

  8. #8
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Ta librairie se lance au moment du load : regarde à la fin de la librairie tu peux voir :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    if(window.FastInit) {
    	FastInit.addOnLoad(SortableTable.load);
    } else {
    	Event.observe(window, 'load', SortableTable.load);
    }
    Donc au moment du load elle execute sa fonction "SortableTable.load". Si tu regardes cette fonction (qui ne s'execute qu'à l'événement load de la page), on voit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    if(SortableTable.options.autoLoad) {
    	$A(SortableTable.options.tableSelector).each(function(s){
    		$$(s).each(function(t) {
    			SortableTable.init(t, {tableScroll : SortableTable.options.tableScroll});
    		});
    	});
    }
    On comprend donc que pour chaque table concernée, on execute
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    SortableTable.init(t, {tableScroll : SortableTable.options.tableScroll});
    Dans ton cas, tu n'es plus apres un load, mais après ta mise à jour AJAX, tu ne fais donc que forcer l'initialisation à la fin de ton callback ajax.

  9. #9
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut
    Effectivement, je comprends déjà mieux

    Petit problème tout de même, l'idée fonctionne lorsque l'utilisateur clique sur quelques critères de recherche mais admettons au bout d'un moment la table n'est plus mise à jour (j'ai pas ce problème lorsque je supprime ta ligne..)

    faut-elle la réinitialiser en début du refreshtable ?

    Ben

  10. #10
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Citation Envoyé par Ben86 Voir le message
    Petit problème tout de même, l'idée fonctionne lorsque l'utilisateur clique sur quelques critères de recherche mais admettons au bout d'un moment la table n'est plus mise à jour (j'ai pas ce problème lorsque je supprime ta ligne..)
    faut-elle la réinitialiser en début du refreshtable ?
    Je comprends pas la question

  11. #11
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut
    Et bien en fait, l'utilisateur surf sur la page recherche. Il utilise donc les checkbox et autres outils pour mettre à jour le tableau.

    Au bout de deux ou trois clics ou actions sur les outils pour mettre à jour le tableau, ce dernier ne se met pas à jour (alors que je n'ai pas ce problème sans l'appel forcé de la lib... )

    merci

  12. #12
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    je ne sais pas...

    il y a des erreurs dans la console firefox ?
    on peut voir la page qq part en ligne ?

  13. #13
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut
    Hello, désolé j'ai passé un week-end loin d'internet pour me détendre un peu ! Et... retour à la réalité.

    Bref, pour te répondre non la page n'est pas en ligne elle est uniquement en intranet.

    Sous la console, j'ai aucune erreur. Uniquement quelques avertissements.

    Finalement, pour résumer si j'ai pas la ligne que tu m'as donné pour forcer la librairie, j'obtiens le résultat souhaité c'est à dire :

    L'utilisateur peut effectuer une recherche en cliquant sur différentes checkbox, carte flash ou slider afin de définir ses critères. Le tableau varie en fonction des résultats.

    Par contre, si j'opte pour ta solution la mise à jour ne s'effectue qu'une seule et unique fois. Je dois recharger ma page si je veux faire une autre recherche. A croire que ma fonction refreshtable n'est pas rappelée (bien qu'elle le soit car mon Alert() affiche correctement [object Object] et les nouveaux [object Object] si je modifie mes critères). :S


    EDIT : en testant le refreshtable comme ceci :
    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
     
    function refreshTable(donnees)
    {
    	donnees = $(donnees);
    	alert(donnees);
    	var table = $('aff_lot'),	
    	th = table.select('thead')[0].select('th'),
    	tableaulot = [], retour = "";
     
    	table.style.display = "block";
     
    	for(var i = 0, l = th.length; i < l; i++) {
    		tableaulot.push(th[i].innerHTML);
    	}
    	for(var i = 0, l = (donnees.length < 30) ? donnees.length : 30; i < l; i++) {
     
    			var nb = '';
    			var retour = '';
    			var renta = '';
    			var statut = '';
    			var taux = '';
     
    			donnees.each( 
    		function (reponses)
            {		
     
    	retour += '<tr>'	
    		+ '<td>' + statut + '</td>'
            + '<td><a href="biens_aff_lot.php?id_lot='+reponses.id_lots+'&id_prog='+reponses.id_prog+'" title="Lot : '+reponses.numero+' (R&eacute;f #'+reponses.id_lots+') - '   + reponses.titre + '" onclick="Modalbox.show(this.href, {title: this.title, width: 700});  return false;">'   + reponses.numero + '</a></td>'
    		+ '<td><a href="bien_aff_un_programme.php?id_prog='+reponses.id_prog+'" title="Programme '   + reponses.titre + '" onclick="Modalbox.show(this.href, {title: this.title, width: 700});  return false;">'   + reponses.titre + '</a></td>'
    		+ '<td>'   + reponses.code_postal + '</td>'
    		+ '<td>'   + reponses.ville + '</td>'
    		+ "</tr>";
    		nb++;
    		}
    		);
    	}
    	alert(donnees.length);
    	if(donnees.length > 0) {
    	table.select('tbody')[0].update(retour);
    	SortableTable.init(table, {tableScroll : SortableTable.options.tableScroll});
    	}
    	else { 
    	table.select('tbody')[0].update("<tr><td colspan='10'><p style='font-size:14px; text-align:center; color:midnightblue;'><strong>Aucune réponse ne correspond à votre recherche</strong><br /></p><p style='font-size:10px; text-align:center;'> <a href=''>Effectuer une nouvelle recherche </a> </p></td></tr>");
    	}
     
    }
    Au premier critère que ej selectionne, j'ai deux alert. Au second, qu'un seul (le premier). Le alert(donnees.length); ne me ressort rien
    Merci

  14. #14
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    L'appel à la librairie doit changer d'une façon ou d'une autre le tableau et ta fonction ne doit plus fonctionner. Essaye de voir ce qui ne fonctionne plus dans ta fonction : à quel moment elle ne trouve plus qqchose.

  15. #15
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut
    Bonjour,

    Désolé pour le retard mais pas mal de choses à faire ces derniers temps... Ah Septembre ! Bref, j'en reviens à mes moutons.

    J'ai mis des alert(); voir où mon script se stoppait et voici le résultat :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    donnees = $(donnees);
    	// alert(donnees);
    	alert('Test 0'); // AFFICHE
    	var table = $('aff_lot');
    	alert('Test 1'); // AFFICHE
    	th = table.select('thead')[0].select('th');
    	alert('Test 2'); // NON AFFICHE
    	tableaulot = [], retour = "";
    	alert('Test 3'); // NON AFFICHE
    	table.style.display = "block";
    	alert('Test 4'); // NON AFFICHE
    Comme je le présente ci-dessus, lorsque je fais ma première recherche, aucun problème tout s'affiche et le tableau est bien mis à jour. Par contre, si une fois que j'ai selectionné un critère (exemple : département, ou prix, ou type de loi) alors ... mon script ne me retourne que "Test 0" puis "Test 1" et plus rien ...

    merci beaucoup de m'accorder du temps

  16. #16
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Après avoir testé, avec ce 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
    <table id="test">
    	<thead>
    		<tr>
    			<th>aaa</th>
    			<th>bbb</th>
    			<th>ccc</th>
    			<th>ddd</th>
    			<th>eee</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>aaa</td>
    			<td>aaa</td>
    			<td>aaa</td>
    			<td>aaa</td>
    			<td>aaa</td>
    		</tr>
    		<tr>
    			<td>bbbb</td>
    			<td>bbbb</td>
    			<td>bbbb</td>
    			<td>bbbb</td>
    			<td>bbbb</td>
    		</tr>
    		<tr>
    			<td>ccc</td>
    			<td>ccc</td>
    			<td>ccc</td>
    			<td>ccc</td>
    			<td>ccc</td>
    		</tr>
    	</tbody>
    </table>
    <script type="text/javascript">
    Event.observe(window, "load", function(){
    $("test").addClassName("sortable").addClassName("scroll");
     SortableTable.init($("test"), {tableScroll : SortableTable.options.tableScroll});
     });
    </script>
    Ta table unique est détruite après l'appel à la librairie pour être remplacée par 2 divs contenant chacune un morceau de ta table : le head pour l'une, le body pour l'autre. Du coup, $("aff_lot") renvoie null, tu as en fait aff_lot-head et aff_lot-body...

    La solution ? changer de librairie ou t'y adapter..

  17. #17
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 24
    Par défaut
    Ah mince ... Qu'entends-tu par "m'y adapter" ? Existe-t-il une solution simple pour recréer le tableau à chaque fois afin de contrer le problème ?

    Merci

Discussions similaires

  1. Splitter deux fois et exécuter un script avec les valeurs
    Par Sarolion11 dans le forum VBScript
    Réponses: 3
    Dernier message: 31/05/2013, 11h13
  2. Réponses: 0
    Dernier message: 10/10/2012, 18h11
  3. [MySQL] Script avec deux requetes
    Par steph70 dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 17/03/2011, 09h45
  4. [Prototype] Evaluer un script avec Ajax.Updater
    Par razmous dans le forum Bibliothèques & Frameworks
    Réponses: 8
    Dernier message: 28/12/2009, 21h29
  5. Script test de deux chaine avec if
    Par kacedda dans le forum Linux
    Réponses: 6
    Dernier message: 02/05/2003, 15h38

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