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.
<?php //including the database connection file include_once("config.php"); //fetching data in descending order (lastest entry first) //$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated // using mysqli_query instead ?> <html> <head> <title>Homepage</title> <link rel="stylesheet" href="DataTables/datatables.css" type="text/css"> <link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css"> <link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css"> <script src="DataTables/datatables.js"></script> <script src="style/jquery-3.2.1.js"></script> <script src="style/datatable.js"></script> <script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script> <script src="DataTables/DataTables/js/jquery.dataTables.js"></script> </head> <body> <a href="add.html">Add New Data</a><br/><br/> <table id="datatable" class="display" width='100%' border=0> <thead> <tr bgcolor='#CCCCCC'> <td>Name</td> <td>Age</td> <td>Email</td> <td>Update</td> </tr> </thead> <?php //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array //$action=$_POST["action"]; //if($action=='showroom') { $result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC"); while($res = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>".$res['name']."</td>"; echo "<td>".$res['age']."</td>"; echo "<td>".$res['email']."</td>"; 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>"; } } ?> </table> </body> </html>
Add.html
<html> <head> <title>Add Data</title> <script src="style/jquery-3.2.1.js"></script> <script src="style/insert.js"></script> <script src="style/view.js"></script> </head> <body> <a href="index.php">Home</a> <br/><br/> <table bgcolor="orange" align="center" width="25%" border="0"> <tr> <td>Name</td> <td><input type="text" name="name" id="name"></td> </tr> <tr> <td>Age</td> <td><input type="text" name="age" id="age"></td> </tr> <tr> <td>Email</td> <td><input type="text" name="email" id="email"></td> </tr> <tr> <td></td> <td><input type="submit" name="Submit" id="submit" value="Add"></td> </tr> </table> <button type="button" id="submitBtn">Show All</button> <div id="content"></div> </body> </html>
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.
$(document).ready(function(e) { $('#submitBtn').click(function() { debugger; $.ajax({ //data :{action: "showroom"}, url :"index.php", //php page URL where we post this data to view from database type :'POST', success: function(data){ $("#content").html(data); } }); }); });
Advertisement
Answer
**index.php** <?php //including the database connection file include_once("config.php"); //fetching data in descending order (lastest entry first) //$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated // using mysqli_query instead ?> <html> <head> <title>Homepage</title> <link rel="stylesheet" href="DataTables/datatables.css" type="text/css"> <link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css"> <link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css"> <script src="DataTables/datatables.js"></script> <script src="style/jquery-3.2.1.js"></script> <script src="style/datatable.js"></script> <script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script> <script src="DataTables/DataTables/js/jquery.dataTables.js"></script> </head> <body> <a href="add.html">Add New Data</a><br/><br/> <table id="datatable" class="display" width='100%' border=0> <thead> <tr bgcolor='#CCCCCC'> <td>Name</td> <td>Age</td> <td>Email</td> <td>Update</td> </tr> </thead> <?php //while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array //$action=$_POST["action"]; //if($action=='showroom') { $result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC"); while($res = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>".$res['name']."</td>"; echo "<td>".$res['age']."</td>"; echo "<td>".$res['email']."</td>"; 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>"; } } ?> </table> </body> </html> **add.html** <html> <head> <title>Add Data</title> <script src="style/jquery-3.2.1.js"></script> <script src="style/insert.js"></script> <script src="style/view.js"></script> </head> <body> <a href="index.php">Home</a> <br/><br/> <table bgcolor="orange" align="center" width="25%" border="0"> <tr> <td>Name</td> <td><input type="text" name="name" id="name"></td> </tr> <tr> <td>Age</td> <td><input type="text" name="age" id="age"></td> </tr> <tr> <td>Email</td> <td><input type="text" name="email" id="email"></td> </tr> <tr> <td></td> <td><input type="submit" name="Submit" id="submit" value="Add"></td> </tr> </table> <button type="button" id="submitBtn">Show All</button> <div id="content"></div> </body> </html> **view.js** $(document).ready(function(e) { $('#submitBtn').click(function() { debugger; $.ajax({ //data :{action: "showroom"}, url :"index.php", //php page URL where we post this data to view from database type :'POST', success: function(data){ $("#content").html(data); } }); }); }); **datatable.js** $(document).ready(function() { $('#datatable').DataTable( { } ); } );