performance sur une listview avec beaucoup de lignes

Version imprimable

31/01/2012, 16h47
jerem_orga

performance sur une listview avec beaucoup de lignes
Bonjour,

J'utilise une liste standard dans JQUERY :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <ul data-role="listview" data-filter="false"> <li> <h3>article 1</h3> </li> <li> <h3>article 2</h3> </li> <li> <h3>article 3</h3> </li> </ul>
Savez-vous combien de lignes maximum est il raisonnable d'afficher dans la listview ?

Je pose la question car je remarque que si j'affiche 500 lignes dans la listview, ca commence à ramer sérieusement.
Et si je mets le data-filter à true ... là il faut être très patient !

Merci pour vos retours.
31/01/2012, 17h28
SpaceFrog

j'ai propose un filtre sur un table qui peut s'appliquer a un ul ...
ça se code assez simplement en jquery, et c'est pas 500 lignes qui va lui faire peur ^^
31/01/2012, 18h00
jerem_orga

Citation:

j'ai propose un filtre sur un table qui peut s'appliquer a un ul ...

comprends pas trop ce que tu veux dire ...

Citation:

ça se code assez simplement en jquery, et c'est pas 500 lignes qui va lui faire peur ^^

même en utilisant le data-filter ?

Désolé, mais une "listview", pour moi, ça veut rien dire... :(

Mais sinon, tu ne montres que du code HTML, or il ne pose aucun souci d'affichage...

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
<!doctype html>
<html lang=fr">
<head>
	<meta charset="utf-8" />
	<title>Longue liste</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<?php
$start = microtime(true);
$affiche = '';
$i=0;
while($i++ < 1000){
	$affiche.= '<li><h3>Article '.$i.'</li>';
}
?>
	<p>
<?php
	echo round((microtime(true) - $start), 5) . ' s';
?>
	</p>
	<ul data-role="listview" data-filter="true">
	<?php echo $affiche; ?>
	</ul>
</body>
</html>

http://javascript.developpez.com/faq...er#FiltreTable

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type='text/javascript'>
$(function(){
for (i=0;i<1500;i++){
	$("#foo").append(   $('<li/>').html(  String.fromCharCode( 97+ Math.floor(Math.random()*25 ))))
	}
 
$("#filter").click( function(){
	char=$('#vfilter').val()
	$('#foo li').each(function(){  
	   lival=$(this).html();
	  $(this).css({'display': (lival!=char)?"none":"block"})
	  })
	})
})
</script> 
</head>
<body>
<ul id="foo"></ul>
<input type="text" id="vfilter" value="" />
<input type="button" id="filter" value="filtre" />
</body>
</html>

[edit] non pas piaf ...

Ceci devrait être plus rapide

Code:

1
2
3
4
$("#filter").click( function(){
	char=$('#vfilter').val()
	$('#foo li').css('display','block').filter( function(){  return $(this).text()!=char } ).css('display',"none")
	})