filtrage de (gros) tableau sur plusieurs colonnes [Résolu]

[manu.acl]

Hello,

Je suis en train de réaliser un projet qui contient notamment une page avec un tableau d'environ 200 lignes, ou plus.

Mon soucis est de mettre en place un filtre optimisé, et sur toutes les colonnes à la fois, sur celui-ci.

J'ai bien sur essayé uiTableFilter ; il ne filtre que sur une colonne à la fois.
PicNet est plus adapté à mon besoin, mais il y a un bug fâcheux lorsqu'on saisit 'or' ou 'and' dans un champ de recherche...

J'ai réalisé un petit script en jQuery qui fonctionne très bien lorsque je limite le nombre de lignes à quelques dizaines. Mais dès que je teste sur 200 ça mouline... longtemps.

Voici la chose :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var tabId = 'tableau';
$('#'+tabId+' thead input').keyup(function(){
  $('#'+tabId+' tbody tr').show();
  $('#'+tabId+' tbody tr').each(function(){
    var numRow = $('#'+tabId+' tbody tr').parent().children().index($(this));
    $('#'+tabId+' thead input.filtre').each(function(){
      var numCol = $(this).parent().parent().children().index($(this).parent());
      var cellVal = $(this).val().toLowerCase();
      var boxVal = $('#'+tabId+' tbody tr:eq('+numRow+') td:eq('+numCol+') span').text().toLowerCase();
 
      if(cellVal!=''){
        if(boxVal.indexOf(cellVal) == -1){
          $('#'+tabId+' tbody tr:eq('+numRow+')').hide();
          return false;
        }
      }
    });
  });
});

Mon tableau étant sous la forme :

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
27
28
29
30
31
32
33
34
35
36
37
38
<table>
  <thead>
    <tr>
      <th>
        <span>col 1</span><br/>
        <input type="text" />
      </th>
      <th>
        <span>col 2</span><br/>
        <input type="text" />
      </th>
      <th>
        <span>col 3</span><br/>
        <input type="text" />
      </th>
      <th>
        <span>col 4</span><br/>
        <input type="text" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span>texte</span>
      </td>
      <td>
        <span>texte</span>
      </td>
      <td>
        <span>texte</span>
      </td>
      <td>
        <span>texte</span>
      </td>
    </tr>
  </tbody>
</table>

Si quelqu'un a une idée pour optimiser mon code, et obtenir ainsi un temps d'exécution raisonnable sur 200 lignes, ou un autre script existant, je suis preneur.

J'ai vu qu'il y avait un système de cache dans uiTableFilter, mais je n'ai pas très bien compris comment ça marchait.

Merci.

[Golgotha]

Bonjour, j'ai déjà travaillé avec des milliers de données dans des tableaux javascript paginé et je n'ai pas eu de problème de performance..

j'avais utilisé ça :
http://www.datatables.net/

Il en existe beaucoup d'autre.. si tu tape "datatable js" sur google.

j'essayerais de testé ton cas ce soir.

[SpaceFrog]

TableSort ne pose pas non plus de souci

[manu.acl]

Envoyé par Golgotha

Bonjour, j'ai déjà travaillé avec des milliers de données dans des tableaux javascript paginé et je n'ai pas eu de problème de performance..

j'avais utilisé ça :
http://www.datatables.net/

Il en existe beaucoup d'autre.. si tu tape "datatable js" sur google.

j'essayerais de testé ton cas ce soir.

Impressionnant la rapidité d'exécution de la démo comparé à mon script
J'essaye de mettre ça en place.

Merci bien.

[manu.acl]

En affichant la totalité de ma base DataTables a quand même un peu de mal avec un peu plus de 1300 lignes.

En bloquant à 200 j'ai un temps de réponse de 2 à 3 secondes en filtrant. C'est pas mal du tout.

Mais je ne vois pas la possibilité de mettre un filtre par colonne ?
Ce qui me serait vraiment très très très utile.

[SpaceFrog]

TableSort ? tu n'en veux pas ?

[manu.acl]

Envoyé par SpaceFrog

TableSort ? tu n'en veux pas ?

TableSort fait bien du filtrage ?
Car dans la description sur plugins.jquery.com ils n'en parlent pas

tableSort is a very fast and unobtrusive table sorter

* Striving to minimize the invasion in the original design
* Sorts alternately ascending and descending
* Sorts EVERY tbody, binds calling events to cells in definable row of thead
* No markup changes, no bound events lost, only CSS classes changed
* No support for colspan and rowspan (yet)

[SpaceFrog]

y'a pas grand chose à modifier pour filtrer si il ne le fait pas d'office

[Golgotha]

Tu n'as pas la fibre optique commerciale SpaceFrog

[SpaceFrog]

S'il te mordent ...

Non je ne suis en effet pas commercial pour deux sous ...

Mais je pensais a un truc plus simple pour filtrer
il suffirait de basculer en display none les tr parents de tds avant pour contenu le filtre ( sur regexp par exemple ) au moyens des selecteur jquery ...

je teste pour voir si je peux faire un exemple .

[SpaceFrog]

Un petit code pas optimisé testé sur un tableau de 1000 lignes
ça semble donner des resultats satisfaisants
il suffit de rentrer une regex dans la zone de texte
genre masquer toutes les lignes dont le contenu de la première cellule commence par a => ^a

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style type='text/css'>
table td {border:solid 1px silver;}
table   {      border-collapse: collapse; 
		float:left; }
</style>
<script type='text/javascript' src='Scripts/jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
function bar(){
reg=new RegExp(document.getElementById('filtre').value)
$("tr").each(function(){
	this.style.display=(reg.test($(this).children('td').eq(0).text()))?'none':'';
	})
}
 
</script>
</head>
<body >
<table id="foo">
<tr>
	<td>a</td>
	<td>kjhlkjh</td>
</tr>	
<tr>
	<td>aaaa</td>
	<td>kjhlkjh</td>
</tr>	
<tr>
	<td>abe</td>
	<td>kjhlkjh</td>
</tr>	
<tr>
	<td>ddda</td>
	<td>kjhlkjh</td>
</tr>	
 
---/---
 
<tr>
	<td>gggga</td>
	<td>kjhlkjh</td>
</tr>	
</table>
<input type='text' id="filtre" value="" />
<input type="button" onclick="bar()" value="test" />
</body>
 
</html>

On peut bien entendu paramétrer la ou les colonnes à filtrer

[SpaceFrog]

de très bon résultats même

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
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
 
<style type='text/css'>
table td {border:solid 1px silver;}
table   {      border-collapse: collapse; 
		float:left; }
</style>
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<script type='text/javascript'>
function bar(col){
reg=new RegExp(document.getElementById('filtre').value)
$("tr").each(function(){
	this.style.display=($(this).children('td').eq(col).text().match(reg))?'':'none';
	})
}
 
 
/***************************
* Speed Table By SpaceFrog *
**************************/
 
function BuildTable(DestObj,NrLines,NbrCells){
var start=new Date();
var BaliseTable=document.createElement('table');
BaliseTable.id="foo"
var BaliseTbody=document.createElement('tbody');
 
for(i=0;i<NrLines;i++){
 new AddLine(BaliseTbody,NrLines,NbrCells, i)
 }
 
BaliseTable.appendChild(BaliseTbody);
DestObj.appendChild(BaliseTable);
document.close();
var End=new Date();
 
//alert((End-start)/1000)
 
}
 
function AddLine(DestBody,NrLines,NbrCells, Contenu){
var NewLine=document.createElement('tr');
for(l=0;l<NbrCells;l++){
     new AddCells(NewLine,Contenu+'_'+l);
     }
DestBody.appendChild(NewLine)      
 
}
 
function AddCells(DestLine,contenu){
var newCell=document.createElement('td');
newCell.style.border="solid 1px gray";
newCell.appendChild(document.createTextNode('Cellule '+contenu));
DestLine.appendChild(newCell);
}
 
</script>
</head>
<body onload="BuildTable(document.body,2900,3)">
filtre:<input type='text' id="filtre" value="" /><br/>
colonne: <input type='text' id="col" value="0" />
 
<input type="button" onclick="bar(document.getElementById('col').value)" value="test" />
</body>
 
</html>

si je tape par exemple : ^Cellule 1\d*_ dans l'input de filtre le résultat est très rapide
moins de 2 secondes pour 5000 lignes

A noter que j'ai inverser la logique d'affichage par rapport au script précédent, le filtre affiche les match sur la reg et en masquant le non match

[manu.acl]

En effet ça a l'air sympa.

Je passe le post en résolu, merci.