[AJAX] Add, Delete, Update + Filter (à résoudre) TABLEAU
Bonjour,
Voici mon besoin :
Gérer via un tableau codé en AJAX, JavaScript, PHP, l'ajout de données en base, la modification et la suppression, cette partie fonctionne parfaitement.
N'ayant pas de grosse connaissance en programmation, j'ai essayé d'ajouter une function "filtre" pour afficher dans le tableau généré les données qui m'intéressent.
Voici le code que j'ai trouver sur le Net et qui marche pour les fonctions ADD, DELETE et UPDATE :
** index.php ** -> Pas grand chose, juste un tableau vide
Code:
1
2
| <table id='demoajax' cellspacing="0">
</table> |
** DbManipulate.php **
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
| <?php
include('db.php');
if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
call_user_func($actionfunction,$_REQUEST,$con);
}
// Fonction Save DATA
function saveData($data,$con){
$fname = $con->real_escape_string($data['fname']);
$lname = $con->real_escape_string($data['lname']);
$domain = $con->real_escape_string($data['domain']);
$email = $con->real_escape_string($data['email']);
$sql = "insert into ajaxtable(firstname,lastname,domain,email) values('$fname','$lname','$domain','$email')";
if($con->query($sql)){
showData($data,$con);
} else {
echo "error";
}
}
// Fonction Show DATA
function showData($data,$con){
$sql = "select * from ajaxtable order by id asc";
$data = $con->query($sql);
$str='<tr class="head"><td>Firstname</td><td>Lastname</td><td>Domain</td><td>Email</td><td></td></tr>';
//if($data->num_rows>0) if (($firstname_tri) != "") {
if($data->num_rows>0) if (($firstname_tri) == "") {
while( $row = $data->fetch_array(MYSQLI_ASSOC)){
$str.="<tr id='".$row['id']."'><td>".$row['firstname']."</td><td>".$row['lastname']."</td><td>".$row['domain']."</td><td>".$row['email']."</td><td><input type='button' class='ajaxedit' value='Edit'/> <input type='button' class='ajaxdelete' value='Delete'></td></tr>";
}
} else {
$str .= "<td colspan='5'>No Data Available</td>";
}
echo $str;
}
function updateData($data,$con){
$fname = $con->real_escape_string($data['fname']);
$lname = $con->real_escape_string($data['lname']);
$domain = $con->real_escape_string($data['domain']);
$email = $con->real_escape_string($data['email']);
$editid = $con->real_escape_string($data['editid']);
$sql = "update ajaxtable set firstname='$fname',lastname='$lname',domain='$domain',email='$email' where id=$editid";
if($con->query($sql)){
showData($data,$con);
}
else{
echo "error";
}
}
function deleteData($data,$con){
$delid = $con->real_escape_string($data['deleteid']);
$sql = "delete from ajaxtable where id=$delid";
if($con->query($sql)){
showData($data,$con);
}
else{
echo "error";
}
}
?> |
Maintenant, le code que j'ai remixé avec une function "Filtre" trouvée sur le Net, ça ne doit pas être très beau :/
** index.php **
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
| <script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunctionTri(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var firstname_tri = document.getElementById('firstname_tri').value;
var lastname_tri = document.getElementById('lastname_tri').value;
var domain_tri = document.getElementById('domain_tri').value;
var email_tri = document.getElementById('email_tri').value;
var queryString = "?firstname_tri=" + firstname_tri ;
queryString += "&lastname_tri=" + lastname_tri + "&domain_tri=" + domain_tri + "&email_tri=" + email_tri ;
//ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.open("GET", "DbManipulate.php" + queryString, true);
ajaxRequest.send(null);
}
</script> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <form name='forumulaire_filtres'>
<div class="div_tbl_form_filtres_maitre">
<div class="div_tbl_from_filtres_titre">
<b>Filtres</b>
</div>
<div class="div_tbl_form_filtres_menu">
<div class="div_tbl_form_filtres_menu_date"><b>firstname</b></div>
<div class="div_tbl_form_filtres_menu_priorite"><b>lastname</b></div>
<div class="div_tbl_form_filtres_menu_numdt"><b>domain</b></div>
<div class="div_tbl_form_filtres_menu_application"><b>email</b></div>
</div>
<div class="div_tbl_form_filtres">
<div class="div_tbl_form_filtres_date"><input type='text' id='firstname_tri' size="9" value="" maxlength="10"/></div>
<div class="div_tbl_form_filtres_date"><input type='text' id='lastname_tri' size="9" value="" maxlength="10"/></div>
<div class="div_tbl_form_filtres_numdt"><input type='text' id='domain_tri' size="11" value="" maxlength="11"/></div>
<div class="div_tbl_form_filtres_numdt"><input type='text' id='email_tri' size="11" value="" maxlength="11"/></div>
</div>
<div class="div_tbl_form_valider"><input class="bouton_valider" type='button' onclick='ajaxFunctionTri()' value='Valider'/></div>
</div>
</form>
<div id='ajaxDiv'>Your result will display here</div>
<table id='demoajax' cellspacing="0">
</table> |
** Dbmanipulate.php ** -> Ce code a été ajouté au début du fichier
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| function filtreDate ($data,$con) {
$dbhost = "localhost";
$dbuser = "userdemandes";
$dbpass = "userdemandes";
$dbname = "demandes";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$firstname_tri = $_GET['firstname_tri'];
$lastname_tri = $_GET['lastname_tri'];
$domain_tri = $_GET['domain_tri'];
$email_tri = $_GET['email_tri'];
// Escape User Input to help prevent SQL Injection
$firstname_tri = mysql_real_escape_string($firstname_tri);
$lastname_tri = mysql_real_escape_string($lastname_tri);
$domain_tri = mysql_real_escape_string($domain_tri);
$email_tri = mysql_real_escape_string($email_tri);
if (($firstname_tri) != "") {
//build query
$query = "SELECT * FROM ajaxtable WHERE firstname = '$firstname_tri'";
if (($lastname_tri) != "")
$sql .= " AND lastname = '$lastname_tri'";
if (($domain_tri) != "")
$sql .= " AND domain = '$domain_tri'";
if (($email_tri) != "")
$sql .= " AND email = '$email_tri'";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<div class='div_tbl_filtres_maitre'>";
$display_string .= "<div class='div_tbl_filtres_menu'>";
$display_string .= "<div class='div_tbl_filtres_menu_date'><b>firstname</b></div>";
$display_string .= "<div class='div_tbl_filtres_menu_priorite'><b>lastname</b></div>";
$display_string .= "<div class='div_tbl_filtres_menu_numdt'><b>domain</b></div>";
$display_string .= "<div class='div_tbl_filtres_menu_application'><b>email</b></div>";
$display_string .= "</div>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
//$display_string .= "<div class='div_tbl_filtres_view'>";
if ( $row[statut]=="OK" ) { $display_string .= "<div class='div_tbl_filtres_view_ok'>"; } else { $display_string .= "<div class='div_tbl_filtres_view_ko'>"; }
$display_string .= "<div class='div_tbl_filtres_date'>$row[firstname]</div>";
$display_string .= "<div class='div_tbl_filtres_priorite'>$row[lastname]</div>";
$display_string .= "<div class='div_tbl_filtres_numdt'>$row[domain]</div>";
$display_string .= "<div class='div_tbl_filtres_application'>$row[email]</div>";
$display_string .= "</div>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</div>";
echo $display_string;
}
} |
** ajax-exemple.php **
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
66
67
68
69
70
71
72
73
74
75
76
77
78
| <?php
$dbhost = "localhost";
$dbuser = "userdemandes";
$dbpass = "userdemandes";
$dbname = "demandes";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$firstname_tri = $_GET['firstname_tri'];
$lastname_tri = $_GET['lastname_tri'];
$domain_tri = $_GET['domain_tri'];
$email_tri = $_GET['email_tri'];
// Escape User Input to help prevent SQL Injection
$firstname_tri = mysql_real_escape_string($firstname_tri);
$lastname_tri = mysql_real_escape_string($lastname_tri);
$domain_tri = mysql_real_escape_string($domain_tri);
$email_tri = mysql_real_escape_string($email_tri);
//build query
$query = "SELECT * FROM ajaxtable WHERE firstname = '$firstname_tri'";
if (($lastname_tri) != "")
$sql .= " AND lastname = '$lastname_tri'";
if (($domain_tri) != "")
$sql .= " AND domain = '$domain_tri'";
if (($email_tri) != "")
$sql .= " AND email = '$email_tri'";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<div class='div_tbl_filtres_maitre'>";
$display_string .= "<div class='div_tbl_filtres_menu'>";
$display_string .= "<div class='div_tbl_filtres_menu_date'><b>firstname</b></div>";
$display_string .= "<div class='div_tbl_filtres_menu_priorite'><b>lastname</b></div>";
$display_string .= "<div class='div_tbl_filtres_menu_numdt'><b>domain</b></div>";
$display_string .= "<div class='div_tbl_filtres_menu_application'><b>email</b></div>";
$display_string .= "</div>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
//$display_string .= "<div class='div_tbl_filtres_view'>";
if ( $row[statut]=="OK" ) { $display_string .= "<div class='div_tbl_filtres_view_ok'>"; } else { $display_string .= "<div class='div_tbl_filtres_view_ko'>"; }
$display_string .= "<div class='div_tbl_filtres_date'>$row[firstname]</div>";
$display_string .= "<div class='div_tbl_filtres_priorite'>$row[lastname]</div>";
$display_string .= "<div class='div_tbl_filtres_numdt'>$row[domain]</div>";
$display_string .= "<div class='div_tbl_filtres_application'>$row[email]</div>";
$display_string .= "</div>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</div>";
echo $display_string;
?> |
En gros le code avec l'ajout des "Filtres" fonctionne à peut prêt bien, sauf que si je rajoute une données et que je refiltre, il ne trouvera pas les nouvelles données ajoutées en base.
De plus, je ne souhaite pas avoir 2 tableaux, un pour les données à afficher filtrées et un pour les fonctions ADD, UPDATE, DELETE.
J'ai essayé d'autres choses avec le code, mais c'est plus de la cuisine qu'autre chose.
C'est pourquoi je vous demande de l'aide afin de crééer une fonction "Filtre" qui reprend la meme logique et structure que les autres, et qui utilise le tableau généré de base comme pour la function "showData".
Je vous remercie par avance :)
