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 :
Mon tableau étant sous la forme :
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 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; } } }); }); });
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.
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 <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>
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.
Partager