Discussion :

[droliprane]

Bonjour à tous,

pour optimiser la recherche interactive dans une liste de plus de 3000 enregistrements, j'utilise un petit script js qui permet de filtrer une table html en rendant invisible les lignes ne contenant pas un mot clé de la recherche

de cette façon, je ne charge la page qu'une seule fois au début, c'est assez rapide (quelques secondes) et ensuite l'utilisateur peut chercher à l'intérieur de la table sans refaire de requête vers le serveur

Le code js est le suivant :

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
function filtrerLISTING(){
 
	var lignes = document.getElementById('table_listing').getElementsByTagName("tr");
 
	for (var i=1; i < lignes.length; i++)
	{
		display = '';
 
		var terms = keywords.toLowerCase().split(" ");
 
		for (var j = 0; j < terms.length; j++) {
 
			if (lignes[i].innerHTML.replace(/<[^>]+>/g, "").toLowerCase()
			   .indexOf(terms[j]) < 0) {
		                    display = 'none';
 
			}
 
 
		}
 
 
		lignes[i].style.display = display;
 
	}
 
}

Je dois préciser que la table listing se trouve dans une iframe, et que le form des critères de recherche se trouve dans la page parente. Le listing scroll donc dans la iframe. A noter que pour avoir un scroll parfaitement compatible avec les différents navigateurs, je passe par une bibliothèque iscroll.js (https://github.com/cubiq/iscroll)

Ca marche extrêmement bien, le seul problème c'est que le filtrage rend invisible les lignes non pertinentes vis à vis des critères mais ne remonte pas le tableau vers les premières lignes restées visibles.

Donc potentiellement, l'utilisateur se retrouve avec une iframe blanche, et croit qu'il n'y a aucun résultat. En fait il suffit de scroller vers le haut pour voir les lignes restées visibles car l'ascenceur est resté à sa place au moment du filtrage en milieu de table.

Ce que je voudrais c'est mettre en place une ruse pour que le listing remonte en tête de liste à chaque fois que le filtrage est exécuté...

J'aurai du mal à vous faire une démo en ligne, quoique, mais je pense que vous aurez compris ?

Merci à quiconque m'apportera une piste pour régler ce petit "bug".

[SylvainPV]

Bonjour,

En pratique, si tu caches des éléments avec display:none, la hauteur du conteneur devrait diminuer et donc la barre de défilement automatiquement s'adapter en taille. Ici le problème c'est iScroll : c'est de l'émulation de scroll, donc ça vient bricoler en permanence avec la hauteur du conteneur.

On peut sûrement régler ce souci en appelant une méthode spécifique à iScroll, qui lui dise de recalculer tout ça. Mais je me demande en premier lieu pourquoi tu as besoin de cette lib. On a pas besoin de ce genre de trucs pour rendre "compatible le scroll avec les différents navigateurs", les barres de défilement sont régies par du CSS basique et si ça ne fonctionne pas de base sur certains navigateurs, ça peut juste se régler en CSS.

[droliprane]

Sur les navigateurs mobiles je n'ai pas eu le choix, enfin surtout safari

J'ai testé plusieurs solutions css pures avant de prendre cette lib et je l'utilise partout dans mon appli web donc je n'envisage pas trop de tout changer

Par contre, voir si une méthode permettrait de recalculer la hauteur de scroll et de l'ascenceur ça ça pourrait être la solution.

Parce que faire un scrollTo(0, 0) ne fonctionne pas, déjà essayé

[SylvainPV]

Je reste circonspect sur l'usage de cette lib.

Mais la méthode refresh devrait régler ce problème : http://iscrolljs.com/#refresh

[droliprane]

oui c'est bien ça :

setTimeout(function () { myScroll.refresh(); }, 0);

exactement le comportement recherché

merci mille fois