Filtre sur tableau

**totot** · 15/01/2014, 19h14

Bonsoir,

J'ai une page qui contient un tableau avec plein d'enregistrement. Ce que je souhaite c'est mettre une zone de texte qui permet de réduire le nombre de ligne du tableau.
par exemple: si je saisie "c", j'aurais tous les noms qui commence par "c", "cl": tout les noms qui commence par "cl". Bien sur, si je saisie rien, on affiche tout le tableau

Voilà ce que j'ai fait mais qui ne fonctionne pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
          <script>
t = $('table');
              $("#client").keyup(function() {
    $.uiTableFilter( t, this.value );
  })
        </script>

Merci de votre aide

**danielhagnoul** · 15/01/2014, 21h53

Bonsoir

On parle de ce plugin : http://projects.gregweber.info/uitablefilter ?

Si "client" est l'ID d'un input de type texte, logiquement et si j'en crois la documentation du plugin :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$( "#client" ).on( "keyup", function(){
    $.uiTableFilter( $( "table" ), $( this ).val() );
});

**totot** · 15/01/2014, 21h55

Oui
J'ai télécharge sa:
jquery.uitablefilter.js

**totot** · 15/01/2014, 21h57

Sa fonctionne toujours pas
table sa correspond à quoi?

**danielhagnoul** · 15/01/2014, 23h20

Bonsoir

Je viens de tester, cela fonctionne bien. Votre structure de "table" est correcte avec "thead" et "tbody" ?

Le code de ma page de test, pour tester il suffit de copier-coller.

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Forum jQuery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    <script>
        "use strict";
 
        var debugBool = true;
 
         /*
          * On utilise head.js pour charger JS et CSS de manière asynchrone 
          * et parallèle, mais on les exécute dans l'ordre.
          * Voir la documentation et l'API : http://headjs.com/
          * Les polices de caractères et le fichier head.js doivent être 
          * inclus manuellement.
          */
        head.load(
            "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
            "http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css",
            "http://code.jquery.com/qunit/qunit-1.13.0.css",
            { "d3" : "http://d3js.org/d3.v3.min.js" },
            "http://danielhagnoul.developpez.com/lib/dvjh/d3HeadBase.js",
            { "jquery" : "http://code.jquery.com/jquery-2.0.3.min.js" },
            { "jqueryui" : "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" },
            "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
            { "qunit" : "http://code.jquery.com/qunit/qunit-1.13.0.js" }
        );      
    </script>
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
        .qunit { margin-top: 2.4rem; }
 
/*-- Début code du test --*/
 
 
 
/*-- Fin code du test --*/
 
    </style>
</head>
<body>
    <header>
        <hgroup>
            <h1>Forum jQuery</h1>
            <h2>
                <a href="">Lien</a>
            </h2>
        </hgroup>
    </header>
    <section class="conteneur">
        <nav>
 
<!-- Début code du test -->
 
 
<!-- Fin code du test -->
 
        </nav>
        <article>
 
<!-- Début code du test -->
 
<input name="filter" id="filter" value="" maxlength="30" size="30" type="text">
 
<table class="food_planner"><thead><tr><th colspan="2">Your Food List</th></tr><tr></tr></thead>
    <tbody><tr style="display: table-row;">
          </tr><tr><td><input name="food_id_1" value="23558" checked="checked" id="" style="" type="checkbox"></td><td>
          &nbsp; &nbsp; &nbsp;Beef, ground, 95% lean meat / 5% fat, patty, cooked, broiled<input name="food_source_row_1" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_2" value="18061" checked="checked" id="" style="" type="checkbox"></td><td>
          &nbsp; &nbsp; &nbsp;Bread, rye, toasted<input name="food_source_row_2" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_3" value="11742" checked="checked" id="" style="" type="checkbox"></td><td>
          &nbsp; &nbsp; &nbsp;Broccoli, cooked, boiled, drained, with salt<input name="food_source_row_3" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_4" value="1001" checked="checked" id="" style="" type="checkbox"></td><td>
          &nbsp; &nbsp; &nbsp;Butter, salted<input name="food_source_row_4" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_5" value="6242" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;CAMPBELL Soup Company, CAMPBELL'S CHUNKY Microwavable Bowls, Chicken and Dumplings Soup<input name="food_source_row_5" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_6" value="6396" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;CAMPBELL Soup Company, CAMPBELL'S CHUNKY Soups, Fajita Chicken with Rice &amp; Beans Soup<input name="food_source_row_6" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_7" value="11960" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Carrots, baby, raw<input name="food_source_row_7" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_8" value="1040" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Cheese, swiss<input name="food_source_row_8" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_9" value="7933" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Chicken breast, oven-roasted, fat-free, sliced<input name="food_source_row_9" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_10" value="14209" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Coffee, brewed from grounds, prepared with tap water<input name="food_source_row_10" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_11" value="1130" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Egg, whole, cooked, omelet<input name="food_source_row_11" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_12" value="18265" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;English muffins, wheat, toasted<input name="food_source_row_12" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_13" value="15092" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Fish, sea bass, mixed species, cooked, dry heat<input name="food_source_row_13" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_14" value="18640" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;HEINZ, WEIGHT WATCHER, Chocolate Eclair, frozen<input name="food_source_row_14" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_15" value="42138" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Mayonnaise, reduced-calorie or diet, cholesterol-free<input name="food_source_row_15" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_16" value="4053" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Oil, olive, salad or cooking<input name="food_source_row_16" value="USDA" type="hidden"></td></tr><tr style="display: table-row;"><td><input name="food_id_17" value="9203" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Oranges, raw, Florida<input name="food_source_row_17" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_18" value="20047" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Rice, white, long-grain, parboiled, enriched, cooked<input name="food_source_row_18" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_19" value="18350" checked="checked" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Rolls, hamburger or hotdog, plain<input name="food_source_row_19" value="USDA" type="hidden"></td></tr><tr><td><input name="food_id_20" value="14476" id="" style="" type="checkbox"></td><td>
&nbsp; &nbsp; &nbsp;Tea, ready-to-drink, LIPTON BRISK iced tea, with lemon flavor<input name="food_source_row_20" value="USDA" type="hidden"></td></tr></tbody></table>
 
 
<!-- Fin code du test -->
 
        </article>
        <article class="qunit">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
        </article>
    </section>
    <footer itemscope itemtype="http://danielhagnoul.developpez.com/">
        <time datetime="2014-01-11T10:09:18.884+0100" pubdate>2014-01-11T10:09:18.884+0100</time>
        <span itemprop="name">Daniel Hagnoul</span>
        <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
        <a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
        <a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
        <a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
    </footer>
    <script>
        "use strict";
 
        /*
         * Chargeur de code head.js, document ready et fichiers chargés.
         */
        head.ready( [ "d3", "jquery", "jqueryui", "qunit" ], function(){
 
            var ISOformat = d3.time.format( "%Y-%m-%dT%H:%M:%S.%L%Z" );
 
/* Début code du test */
 
/*
 * Copyright (c) 2008 Greg Weber greg at gregweber.info
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * documentation at http://gregweber.info/projects/uitablefilter
 *
 * allows table rows to be filtered (made invisible)
 * <code>
 * t = $('table')
 * $.uiTableFilter( t, phrase )
 * </code>
 * arguments:
 *   jQuery object containing table rows
 *   phrase to search for
 *   optional arguments:
 *     column to limit search too (the column title in the table header)
 *     ifHidden - callback to execute if one or more elements was hidden
 */
jQuery.uiTableFilter = function(jq, phrase, column, ifHidden){
  var new_hidden = false;
  if( jQuery.uiTableFilter.last_phrase === phrase ) return false;
 
  var phrase_length = phrase.length;
  var words = phrase.toLowerCase().split(" ");
 
  // these function pointers may change
  var matches = function(elem) { elem.show(); };
  var noMatch = function(elem) { elem.hide(); new_hidden = true; };
  var getText = function(elem) { return elem.text(); };
 
  if( column ) {
    var index = null;
    jq.find("thead > tr:last > th").each( function(i){
      if( $(this).text() == column ){
        index = i; return false;
      }
    });
 
    if ( index == null ) throw( "given column: " + column + " not found" );
 
    getText = function(elem){ return jQuery(elem.find(
      ("td:eq(" + index + ")")  )).text();
    };
  }
 
  // if added one letter to last time,
  // just check newest word and only need to hide
  if( (words.size > 1) && (phrase.substr(0, phrase_length - 1) ===
        jQuery.uiTableFilter.last_phrase) ) {
 
    if( phrase[-1] === " " )
    { jQuery.uiTableFilter.last_phrase = phrase; return false; }
 
    var words = words[-1]; // just search for the newest word
 
    // only hide visible rows
    matches = function(elem) {;};
    var elems = jq.find("tbody > tr:visible");
  }
  else {
    new_hidden = true;
    var elems = jq.find("tbody > tr");
  }
 
  elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words( getText(elem), words, false ) ?
      matches(elem) : noMatch(elem);
  });
 
  jQuery.uiTableFilter.last_phrase = phrase;
  if( ifHidden && new_hidden ) ifHidden();
  return jq;
};
 
// caching for speedup
jQuery.uiTableFilter.last_phrase = "";
 
// not jQuery dependent
// "" [""] -> Boolean
// "" [""] Boolean -> Boolean
jQuery.uiTableFilter.has_words = function( str, words, caseSensitive )
{
  var text = caseSensitive ? str : str.toLowerCase();
  for (var i=0; i < words.length; i++) {
    if (text.indexOf(words[i]) === -1) return false;
  }
  return true;
};
 
 
 
$( "#filter" ).on( "keyup", function() {
    $.uiTableFilter( $( "table" ), $( this ).val() );
});
 
 
/* Fin code du test */
 
        });
    </script>
</body>
</html>

**totot** · 16/01/2014, 09h15

Je comprend pas trop ton code.
Je doit reprendre quoi?

**danielhagnoul** · 16/01/2014, 11h06

Envoyé par totot

Sa fonctionne toujours pas
table sa correspond à quoi?

Envoyé par totot

Je comprend pas trop ton code.
Je doit reprendre quoi?

Dans ma page de test, dans les codes (CSS, HTML et JS), les mentions ci-dessous sont destinées au débutant pour qu'il repère facilement la partie du code qui concerne directement son problème.

J'ai simplement repris, pour tests, le code du plugin (corrigé) et l'essentiel des codes de la démonstration du plugin : http://projects.gregweber.info/demo/flavorzoom.html.

Si vous ne comprenez pas $( "table" ), une seule chose à faire revoir les bases (CSS, HTML, DOM, JS) avant de revoir les sélecteurs jQuery (http://api.jquery.com/jQuery/) et le reste des méthodes jQuery (http://api.jquery.com/).

Pour ce qui me concerne, le sujet est clos.

**totot** · 16/01/2014, 11h08

Justement,

J'ai repris sa mais sa ne fonctionne toujours pas

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
    <script type="text/javascript" src="js/jquery.uitablefilter.js"></script>
              <script>
$(function() { 
  var theTable = $('table.filter')
 
 
  $("#filter").keyup(function() {
    $.uiTableFilter( theTable, this.value );
  })
 
  $('#filter-form').submit(function(){
    theTable.find("tbody > tr:visible > td:eq(1)").mousedown();
    return false;
  }).focus(); //Give focus to input field
});  
        </script>

quand je commence à taper sa me met cette erreur:
Uncaught TypeError: Object function (e,t){return new x.fn.init(e,t,r)} has no method 'uiTableFilter'

**totot** · 17/01/2014, 13h15

J'ai a faire cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
            $(function() { 
              var theTable = $('table.filter_client');
              $("#filter").keyup(function() {
                console.log(this.value);
                $.uiTableFilter( theTable, this.value );
              })
            });

Maintenant je voudrait que cela filtre seulement sur la première colonne du tableau

Filtre sur tableau

jQuery

Discussions similaires

Partager

Partager