index.php
First I create a connection with the database, I design table through <td> and <tr>, I create a variable $action to get data through AJAX. I use mysqli_fetch_array to fetch data from the database.
JavaScript
x
57
57
1
<?php2
//including the database connection file3
include_once("config.php");4
5
//fetching data in descending order (lastest entry first)6
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated7
8
// using mysqli_query instead9
?>10
11
<html>12
<head> 13
<title>Homepage</title>14
<link rel="stylesheet" href="DataTables/datatables.css" type="text/css">15
<link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">16
<link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">17
<script src="DataTables/datatables.js"></script>18
19
<script src="style/jquery-3.2.1.js"></script>20
21
<script src="style/datatable.js"></script>22
23
<script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>24
<script src="DataTables/DataTables/js/jquery.dataTables.js"></script> 25
</head>26
27
<body>28
<a href="add.html">Add New Data</a><br/><br/>29
<table id="datatable" class="display" width='100%' border=0>30
<thead>31
<tr bgcolor='#CCCCCC'>32
<td>Name</td>33
<td>Age</td>34
<td>Email</td>35
<td>Update</td>36
</tr>37
</thead>38
<?php 39
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 40
41
//$action=$_POST["action"];42
//if($action=='showroom') 43
{44
$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");45
while($res = mysqli_fetch_array($result)) { 46
echo "<tr>";47
echo "<td>".$res['name']."</td>";48
echo "<td>".$res['age']."</td>";49
echo "<td>".$res['email']."</td>"; 50
echo "<td><a href="edit.php?id=$res[id]">Edit</a> | <a href="delete.php?id=$res[id]" onClick="return confirm('Are you sure you want to delete?')">Delete</a></td>"; 51
}52
}53
?>54
</table>55
</body>56
</html>57
Add.html
JavaScript
1
34
34
1
<html>2
<head>3
<title>Add Data</title>4
<script src="style/jquery-3.2.1.js"></script>5
<script src="style/insert.js"></script>6
<script src="style/view.js"></script>7
</head>8
<body>9
<a href="index.php">Home</a>10
<br/><br/> 11
<table bgcolor="orange" align="center" width="25%" border="0">12
<tr> 13
<td>Name</td>14
<td><input type="text" name="name" id="name"></td>15
</tr>16
<tr> 17
<td>Age</td>18
<td><input type="text" name="age" id="age"></td>19
</tr>20
<tr> 21
<td>Email</td>22
<td><input type="text" name="email" id="email"></td>23
</tr>24
<tr> 25
<td></td>26
<td><input type="submit" name="Submit" id="submit" value="Add"></td>27
</tr>28
</table> 29
30
<button type="button" id="submitBtn">Show All</button>31
<div id="content"></div> 32
</body>33
</html>34
view.js
I fetch data from the database. I use the show_all() function after that I call $.ajax, data, url, type, success function. The first time I try to fetch data from the database through AJAX.
JavaScript
1
16
16
1
$(document).ready(function(e) {2
$('#submitBtn').click(function() {3
4
debugger;5
6
$.ajax({7
//data :{action: "showroom"},8
url :"index.php", //php page URL where we post this data to view from database9
type :'POST',10
success: function(data){11
$("#content").html(data);12
}13
});14
}); 15
});16
Advertisement
Answer
JavaScript
1
152
152
1
**index.php**2
3
<?php4
//including the database connection file5
include_once("config.php");6
7
//fetching data in descending order (lastest entry first)8
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated9
10
11
// using mysqli_query instead12
?>13
14
<html>15
<head> 16
<title>Homepage</title>17
<link rel="stylesheet" href="DataTables/datatables.css" type="text/css">18
<link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">19
<link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">20
<script src="DataTables/datatables.js"></script>21
22
<script src="style/jquery-3.2.1.js"></script>23
24
<script src="style/datatable.js"></script>25
26
<script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>27
<script src="DataTables/DataTables/js/jquery.dataTables.js"></script>28
29
30
31
32
33
</head>34
35
<body>36
<a href="add.html">Add New Data</a><br/><br/>37
38
<table id="datatable" class="display" width='100%' border=0>39
<thead>40
<tr bgcolor='#CCCCCC'>41
<td>Name</td>42
<td>Age</td>43
<td>Email</td>44
<td>Update</td>45
</tr>46
</thead>47
<?php 48
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 49
50
//$action=$_POST["action"];51
//if($action=='showroom')52
53
{54
$result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");55
while($res = mysqli_fetch_array($result)) { 56
echo "<tr>";57
echo "<td>".$res['name']."</td>";58
echo "<td>".$res['age']."</td>";59
echo "<td>".$res['email']."</td>"; 60
echo "<td><a href="edit.php?id=$res[id]">Edit</a> | <a href="delete.php?id=$res[id]" onClick="return confirm('Are you sure you want to delete?')">Delete</a></td>"; 61
}62
}63
?>64
</table>65
</body>66
</html>67
68
69
**add.html**70
71
<html>72
<head>73
<title>Add Data</title>74
<script src="style/jquery-3.2.1.js"></script>75
<script src="style/insert.js"></script>76
<script src="style/view.js"></script>77
78
</head>79
80
<body>81
<a href="index.php">Home</a>82
83
84
85
<br/><br/>86
87
88
<table bgcolor="orange" align="center" width="25%" border="0">89
<tr> 90
<td>Name</td>91
<td><input type="text" name="name" id="name"></td>92
</tr>93
<tr> 94
<td>Age</td>95
<td><input type="text" name="age" id="age"></td>96
</tr>97
<tr> 98
<td>Email</td>99
<td><input type="text" name="email" id="email"></td>100
</tr>101
<tr> 102
<td></td>103
<td><input type="submit" name="Submit" id="submit" value="Add"></td>104
</tr>105
</table>106
107
108
<button type="button" id="submitBtn">Show All</button>109
<div id="content"></div>110
111
112
</body>113
</html>114
115
**view.js**116
117
$(document).ready(function(e) {118
$('#submitBtn').click(function()119
{120
debugger;121
122
123
124
$.ajax({125
//data :{action: "showroom"},126
url :"index.php", //php page URL where we post this data to view from database127
type :'POST',128
success: function(data){129
130
131
132
$("#content").html(data);133
134
}135
136
});137
138
139
140
}); 141
});142
143
144
**datatable.js**145
146
147
$(document).ready(function() {148
$('#datatable').DataTable( {149
150
} );151
} );152