JTABLE - filtre sur un tableau de données

**triaguae** · 20/09/2016, 20h48

Bonjour

J'utilise le plugin Jtable pour afficher des données sur une page, et je voudrais pouvoir installer un système de filtre.
J ai trouvé cette source dont je me suis inspiré mais sans succès: https://github.com/hikalkan/jtable/issues/78
Je n'arrive pas à passer au php la valeur du ana_id : /quo_data.php?action=list&ana_id=

voici les différents codes
html

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Stats </title>
 
 <!-- Attention à l'ordre des js -->
 
<script type='text/javascript' src='Highcharts-3.0.8/js/jquery.min.js'></script>
<script type='text/javascript' src="jquery-ui/jquery-ui.min.js" ></script>
<link href="jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<script src="jtable/jquery.jtable.min.js" type="text/javascript"></script>
<script type='text/javascript' src="quo_data.js"></script>
<script type='text/javascript' src="listes.js"></script>
</head>
<nav>
			<h1>Statisques</h1>
			<p><a href="quo_graph.html">Graphique Valeur individuelle</a> |
			<a href="annee_graph.html">Comparaison sur 3 ans</a></p>
			<br/>
</nav>
<body>
 
<div >
		<!-- Date <input  type="date" id="la_date" name="la_date" size="10" /></br></br> -->
        analyse:<select id="analyses" name="analyses">
			<option value="">-- Analyses --</option>
			</select>
        <button type="button" id="valider">afficher les stats</button>
 
</div>	
 
 
<div id="tableau" style="width: 50%; height: 400px;">
</div>
</body>
 
</html>

js

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
$(document).ready(function () {
 
var $valider = $('#valider');
$valider.click(function(){
 
var $ana_id =  $('#analyses option:selected').val();
// var $la_date = $('#la_date').val();
$chaine_get = 'quo_data.php?action=list&ana_id='+$ana_id;
		$('#tableau').jtable({
            title: 'Listes des valeurs du jour',
 
            actions: {
					listAction: $chaine_get
				},
            fields: {
				ana_id: {
                    key: true,
                    list: true
                },
                val_esp: {
                    title: 'Esp.',
                    width: '20%',
					},
 
                ana_libelle: {
                    title: 'Analyse',
                    width: '20%'},
 
                sta_libelle: {
                    title: 'stat',
                    width: '20%'},
 
                valeur: {
                    title: 'valeur',
                    width: '20%'},
 
				sta_unite: {
                    title: 'Unité',
                    width: '20%'},
            }
        });
	$('#tableau').jtable('load');
 
 
 
    });
	});

php

Code php :

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
<?php
require('connexion.php');
 
// echo $_GET['la_date'];
 if ($_GET["action"] == "list")
 {
	if(($_GET["ana_id"] == "")) {
 
 $requete="select ana_id, val_esp,ana_libelle,sta_libelle, arrondi(val_valeur, sta_id) as valeur, sta_unite 
from tbl_analyse_ana natural join tbl_stat_sta natural join tbl_valeur_val 
where val_date = '20/09/2016' order by val_esp, ana_libelle,sta_libelle";
	}
	else {
 
 $requete="select ana_id, val_esp,ana_libelle,sta_libelle, arrondi(val_valeur, sta_id) as valeur, sta_unite 
from tbl_analyse_ana natural join tbl_stat_sta natural join tbl_valeur_val 
where val_date = '20/09/2016' and ana_id = ".$_GET["ana_id"]." order by val_esp, ana_libelle,sta_libelle";
	}
}
 
 // echo $requete;
 
//Connection base
$resultat = pg_query($dbconn,$requete); 
 
//données dans tableau
$rows = array();
while($row = pg_fetch_array($resultat))
{
    $rows[] = $row;
}
 
//envoi vers Jtable
$jTableResult = array();
$jTableResult['Result'] = "OK";
$jTableResult['Records'] = $rows;
 
print json_encode($jTableResult);
 
 
?>

**triaguae** · 21/09/2016, 08h26

Je ne suis pas passé par de l'ajax, et c'est peut être le problème..
J'ai remarqué qu'au premier clic sur le bouton, les paramètres passent bien au php, mais aux clics suivants ça ne passent plus!
après quelques recherches, essais et maux de tête j'ai trouvé !

voici le code js qui fonctionne :

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
$(document).ready(function () {
 
var $valider = $('#valider');
$valider.click(function(){
 
var $ana_id =  $('#analyses option:selected').val();
$chaine_get = 'quo_data.php?action=list&ana_id='+$ana_id;
alert ($chaine_get);
// var $la_date = $('#la_date').val();
 
 
		$('#tableau').jtable({
            title: 'Listes des valeurs du jour',
 
            actions: {
					listAction: function (postData, jtParams) {
                    console.log("Loading from custom function...");
                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: $chaine_get,
                            type: 'GET',
                            dataType: 'json',
                            data: postData,
                            success: function (data) {
                                $dfd.resolve(data);
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },
				},
            fields: {
				ana_id: {
                    key: true,
                    list: true
                },
                val_esp: {
                    title: 'Esp.',
                    width: '20%',
					},
 
                ana_libelle: {
                    title: 'Analyse',
                    width: '20%'},
 
                sta_libelle: {
                    title: 'stat',
                    width: '20%'},
 
                valeur: {
                    title: 'valeur',
                    width: '20%'},
 
				sta_unite: {
                    title: 'Unité',
                    width: '20%'},
            },
        });
 
	$('#tableau').jtable('load');
 
 
 
    });
	});

JTABLE - filtre sur un tableau de données

jQuery

Vue hybride

Discussions similaires

Partager

Partager