Filtrage des données avec le plugin Tablesorte

**devillers** · 11/05/2018, 18h32

Bonjour,

J'utilise le plugin jquery tablesorter pour filtrer les colonnes d'un tableau.
Le souci est que cela ne me fitre pas les résultats dans les balises<tr></tr> seulement les <th>
Dans la console du navigateur j'ai :

Code :

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

<th class="header headerSortDown">Numéro</th>

et au 'clic'

Code :

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

<th class="header headerSortUp">Numéro</th>

Merci de votre réponse.

Code html :

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
<?php include 'connect.php';
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
 
<title>ISRI</title>
<script type="text/javascript" src="http://localhost/js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="http://localhost/js/jquery.tablesorter.min.js"></script>
</head>
 
<body>
 
   <div class="img">
                <img src="Image/dirmed.jpg" align="center">
   </div>
 <div class="titre">
               <p> ISRI 2017 RN94 sens 1</p>
   </div>
 
    <br />
   <a href="http://localhost/ISRI2.php">Voir sens2</a> <br />
 
<?php
 
 
 
 
if(isset($_POST['search']))
{
    $valueToSearch = htmlspecialchars($_POST['valueToSearch']);
    // search in all table columns
    // using concat mysql function
$query = "SELECT * FROM isri WHERE actions_retenues LIKE '%".$valueToSearch."%' OR Releve LIKE '%".$valueToSearch."%' OR actions_envisagees LIKE '%".$valueToSearch."%' OR Remarques LIKE '%".$valueToSearch."%'";
 
    $search_result = filterTable($link, $query);
    
        
}
 
 
 else {
    $query = "SELECT * FROM isri";
    $search_result = filterTable($link, $query);
 
}
// function to connect and execute the query
function filterTable($link, $query)
{
 
    $filter_Result = mysqli_query($link, $query);
    return $filter_Result;
}
 
?>
 
 
 
        <form action="ISRI.php" method="post">
            <input type="text" name="valueToSearch" placeholder="Value To Search"><br>
            <input type="submit" name="search" value="Recherche"><br><br>
 
            <table id="tablesorter"  class="tablesorter">
			<thead>
                <tr>
				    <th>Numéro</th>
                    <th>PR+abs</th>
                    <th>Relevé inspecteurs</th>
                    <th>Actions envisagées</th>
                    <th>Remarques</th>
					<th>Actions retenues</th>
					<th>Images</th>
                </tr>
     </thead>
      <!-- populate table from mysql database -->
 
 
				<?php
                                if ($search_result = mysqli_query($link, $query))
                                {
                                while($rows = mysqli_fetch_array($search_result)):?>
                <tbody> <tr>
				    <td><?php echo $rows['Numero'];?></td>
                    <td><?php echo $rows['PR'];?></td>
                    <td><?php echo $rows['Releve'];?></td>
                    <td><?php echo $rows['actions_envisagees'];?></td>
                    <td><?php echo $rows['Remarques'];?></td>
					<td><?php echo $rows['actions_retenues'];?></td>
					<td><img src="<?php echo $rows['PHOTOS']; ?>" /></td>
                </tr></tbody> 
                <?php endwhile;
                                mysqli_free_result($search_result);
                                }
                                
                                mysqli_close($link);
                                ?>
            </table>
        </form>
 
 
 
<script type="text/javascript">
$(document).ready(function() 
    { 
         $("#tablesorter").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);
</script>
 
 
 
</body>
</html>

**psychadelic** · 11/05/2018, 22h05

Envoyé par devillers

J'utilise le plugin jquery tablesorter pour filtrer les colonnes d'un tableau.

LEQUEL ?

https://github.com/search?utf8=%E2%9...lesorter&type=

**devillers** · 12/05/2018, 10h00

Bonjour,
j'utilise celui de Christian BACH.
lien
et j'ai téléchargé les fichiers au bon endroit et ai modifié en conséquence

Code html :

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

1
2
3
4
5
6
7
8
9
10
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
 
<title>ISRI</title>
 
  <script type="text/javascript" src="http://localhost/tablesorter-master/jquery-latest.js"></script> 
<script type="text/javascript" src="http://localhost/tablesorter-master/jquery.tablesorter.js"></script> 
</head>

**bonjourajax** · 12/05/2018, 13h59

Code :

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

1
2
3
4
5
$(document).ready(function() 
    { 
         $("#tablesorter").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);

Bonjour,
as-tu chargé jquery

Code javascript :

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

1
2
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

**devillers** · 12/05/2018, 14h08

Salut, j'ai rajouté ta ligne et ça ne filtre pas. Franchement je voix pas où est le problème merci quand même. on finira bien par trouver :-)

**bonjourajax** · 12/05/2018, 14h25

Je ne vois pas non plus tu utilises l'exemple du developpeur^^
Peut etre a voir coté parametres de la fonction

**devillers** · 12/05/2018, 18h30

Merci pour ta réponse je vais voir ça. je vous tiens au courant.

**psychadelic** · 12/05/2018, 19h58

Envoyé par devillers

Bonjour,
j'utilise celui de Christian BACH.
lien
et j'ai téléchargé les fichiers au bon endroit et ai modifié en conséquence

Ca me semble pas une bonne idée. son script à justement été forké par Mottie et est beaucoup plus utilisé.

**devillers** · 13/05/2018, 09h56

Bonjour,

bon j'ai trouvé une piste, le souci se trouve dans les balises <td></td> encardrant le php.
En effet car si je replace

Code html :

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

1
2
3
4
5
6
7
8
9
<tr>
				    <td><?php echo $rows['Numero'];?></td>
                    <td><?php echo $rows['PR'];?></td>
                    <td><?php echo $rows['Releve'];?></td>
                    <td><?php echo $rows['actions_envisagees'];?></td>
                    <td><?php echo $rows['Remarques'];?></td>
		    <td><?php echo $rows['actions_retenues'];?></td>
		    <td><img src="<?php echo $rows['PHOTOS']; ?>"style="height:250px;" /></td>
                </tr>

par

Code html :

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
	<tr>
				    <td>1</td>
                    <td>12+300</td>
                    <td>test</td>
                    <td>test1</td>
                    <td>test2</td>
		    <td>test3</td>
		    <td></td>
                </tr>
 
					<tr>
		     <td>2</td>
                    <td>13+300</td>
                    <td>test1</td>
                    <td>test2</td>
                    <td>test3</td>
		    <td>test4</td>
		     <td></td>
                </tr>

ça fonctionne bizarre non ?

**bonjourajax** · 13/05/2018, 14h31

J'avais mal lu ton code :
Cela risque pas de marcher, t'as mis les balise <tbody></tbody> a l'intérieur de ta boucle while() une table contient un seul thead/ tbody / tfoot
Place les avant la boucle et apres la derniere accolade

Code php :

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

1
2
3
4
5
6
 
<tbody>
<?php while () { ?>
<tr><td></td></tr>
 <?php } ?>
</tbody>

**devillers** · 13/05/2018, 14h51

Salut,

OUI tu as raison c'était bien cela, et ça commençait sérieusement à me courir sur le haricot

.
Merci en tout cas.
Bonne journée

Filtrage des données avec le plugin Tablesorte

jQuery

Discussions similaires

Partager

Partager