I have added this script for fancybox popup. But it is not working.
It is working on other page but don't know what is the problem in this page, there is much more JavaScript for other functionality, may be this is the reason, but when in console, there's no error!
<table id="tb1" cellspacing="0" cellpadding="7" style="width:99%;border:solid 1px#c0bebe;min-width:550px;height:auto;font-family:arial;font-size:11px;margin-left: 6px;border-bottom: none;">
<tr class="heads tr_check" height="44px">
<th style="padding-left:15px;width:5%">Date</th>
<th style="padding-left:15px;width:5%">From</th>
<th style="padding-left:15px;width:5%">Mode</th>
<th style="padding-left:15px;width:40%">Message</th>
<th style="padding-left:15px;width:10%;border-right: medium none;">Document</th>
</tr>
<?php
$msgMngResult = getMessagesForEdit($_GET['projectid']);
if(mysql_num_rows($msgMngResult)>0) {
while($msgMngtaskDtlsRow = mysql_fetch_array($msgMngResult)) {
if($msgMngtaskDtlsRow['message_from']=='Client') {
$bgcolor = "background-color:#F8E0EC";
} else {
$bgcolor = "background-color:#E7FFD6";
}
$id = $msgMngtaskDtlsRow['id'];
$msgres = getMsgDoc($id);
?>
<tr height="44px" class="tr_check">
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['msg_date'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['message_from'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo $msgMngtaskDtlsRow['message_mode'];?></td>
<td style="padding-left:15px;<?php echo $bgcolor;?>"><?php echo substr($msgMngtaskDtlsRow['message'],0,100);?>Read More..</td>
<div id="divForm<?php echo $id;?>" class="fancybox" style="display:none;">
<p><?php echo $msgMngtaskDtlsRow['message'];?></p>
</div>
<td style="border-right: medium none;padding-left:15px;<?php echo $bgcolor;?>">
<?php while($res = mysql_fetch_array($msgres)) {
echo "<br/><a href='".PROJECT_FILE_PATH.$msg_doc."/".$res['message_docs']."' target='_blank' style='color:blue;text-decoration: underline;'>".$res['message_docs']."</a><br/>";
}
?>
</td>
</tr>
<tr class="hidetr tr_check acctr_<?php echo $msgMngtaskDtlsRow['id']; ?>" ><td colspan="8" style="border-right:0px;"></td></tr>
<?php
}
} else { ?>
<tr height="44px" class="tr_check">
<td align="center" colspan="12">
<div id="err"><div id="errormsg" class="no-record"><strong> No Records Found </strong></div></div>
</td>
</tr>
<?php
} ?>
</table>
<link rel="stylesheet" type="text/css" href="css/datepicker.css" />
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/tabber.js"></script>
<script type="text/javascript" src="js/paddRow.js"></script>
<script type="text/javascript" src="js/addUnitRow.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.2/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<script>
$('.fmsg').live('click', function () {
var id = $(this).attr('id');
alert(id);
$("#"+id).fancybox({
'width':800,
'height':450,
'autoSize' : false,
helpers: {
title : {
type : 'float'
}
}
});
});
</script>
Sometimes it shows - ement.prop is not defined.
It appears often.
Related
I have used Datatables to make my generic table look good. It has started working accurately like showing how many pages to show and a search box. But It does not do any functionality like search or pagination.
Here is my code
<?php include 'db.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$.extend( true, $.fn.dataTable.defaults, {
"info": false
} );
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</head>
<body>
<table id="myTable" width="99.8%" class="order-column table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Subject</th>
<th scope="col">Category</th>
<th scope="col">Actions</th>
</tr>
</thead>
<?php
$sql = "SELECT * FROM hr;";
$result = mysqli_query($conn , $sql);
while($row = mysqli_fetch_assoc($result)) : ?>
<tbody>
<tr>
<?php
$id = $row['hr_id'];
$timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp)); ?>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
<td><a class="btn btn-outline-primary btn-sm" <?php echo "href='HrThread.php?id=$id'" ?> >See More</a></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Data fetching is working fine. The table is looking fine also. The only thing that i want is for it to work properly like a datatable should.
I changed some of your script tags and link tags and moved them around a little and changed your code to:
<?php include 'db.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table id="myTable" width="99.8%" class="order-column table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Subject</th>
<th scope="col">Category</th>
<th scope="col">Actions</th>
</tr>
</thead>
<?php
$sql = "SELECT * FROM hr;";
$result = mysqli_query($conn , $sql);
while($row = mysqli_fetch_assoc($result)) : ?>
<tbody>
<tr>
<?php
$id = $row['hr_id'];
$timestamp = $row['timeSent'];
$date = date('d-m-Y',strtotime($timestamp));
$time = date('H:i:s',strtotime($timestamp)); ?>
<td><?php echo $date;?></td>
<td><?php echo $time;?></td>
<td><?php echo $row['subject'];?></td>
<td><?php
$cat = $row['category_id'];
if($cat == 1){
echo "Suggestion";
}
elseif ($cat == 2) {
echo "Claim";
}
else{
echo "Help";
}?></td>
<td><a class="btn btn-outline-primary btn-sm" <?php echo "href='HrThread.php?id=$id'" ?> >See More</a></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$.extend( true, $.fn.dataTable.defaults, {
"info": false
} );
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Try changing your code to this. I don't have the data to populate the table but this seemed to make pagination and the search functionality and everything a dataTable is supposed to do appear to work for me.
I'm generating a table using PHP that will retrieve records from a MySQL database. I'm new to DataTables, and my problem is that the "View Products" button that generates along with the table doesn't work. Clicking the button should redirect to a new page with an entirely different table.
here's a screenshot of what it looks like, just in case I'm not making any sense
Here's the entire code for the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\reset.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\stylesheet.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\og_stylesheet.css">
<style type="text/css">
thead {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- HEADER -->
<?php include "includes/header.php" ?>
<?php session_start();
?>
<!-- END HEADER -->
<table class="table table-striped" id="table_id">
<thead>
<tr>
<th>Supplier ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact Number</th>
<th>Supplier Details</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost", "root", "", "web_db");
$query = "SELECT * FROM Suppliers";
$search = mysqli_query($conn, $query);
if(mysqli_num_rows($search) > 0 ){
while($row = mysqli_fetch_array($search)){
?>
<form action="supplierdetails.php" method="POST">
<tr>
<td>
<?= $row['supplier_id']?>
</td>
<input type="hidden" value=< ?=$row[ 'supplier_id']?> name = "sup_id">
<input type="hidden" value=< ?=$row[ 'name']?> name = "name">
<td>
<?= $row['name']?>
</td>
<td>
<?= $row['address']?>
</td>
<td>
<?= $row['contactnumber']?>
</td>
<td><input type="submit" name="sub" value="View Products" class="btn btn-info" onclick="sample()"></td>
</tr>
</form>
<?php
}
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$(".alert").delay(3000).fadeOut();
});
</script>
<script>
function sample() {
window.alert(document.getElementById("name").getAttribute("value"));
}
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').DataTable();
});
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#table_id').DataTable();
/* Add event listeners to the two range filtering inputs */
$('#min, #max').keyup(function() {
table.draw();
});
});
</script>
</body>
</html>
The buttons work perfectly before I added DataTables, by the way. I also found out that a table with hard-coded data (as in without PHP) also have buttons that work fine. I'm pretty much at my wits end here. Any help will be appreciated.
Remove the onclick="sample()"
Add this in a document.ready
$(".btn-info").on("click", function() {
window.alert(document.getElementById("name").getAttribute("value"));
});
Maybe use a window.alert('test');
since I dont see the element with the id name anywhere
I am making one application in which the data is generated from my sql in html table format. I want to generate those data in excel format. Here is my code:
demo.php
<?php
include 'include/db_connection.php';
$query = "select * from main_master";
$result = mysql_query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Export HTML table to Excel File using Jquery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 class="text-center">Export HTML table to Excel File using Jquery with PHP</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="30%">Name</th>
<th width="10%">Gender</th>
<th width="50%">Designation</th>
</tr>
<?php
while($row = mysql_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $row['B']; ?></td>
<td><?php echo $row['D']; ?></td>
<td><?php echo $row['E']; ?></td>
<td><?php echo $row['F']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div align="center">
<button name="create_excel" id="create_excel" class="btn btn-success">Create Excel File</button>
</div>
</div>
<br />
</body>
</html>
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
});
</script>
excel.php
<?php
header('Content-Type: application/vnd.ms-excel');
header('Content-disposition: attachment; filename='.rand().'.xls');
echo $_GET["data"];
?>
While executing above code, nothing is done. excel not generated. Please help.
I guess everything is working fine it's just you are trying to send too much data in url
$('#create_excel').click(function(){
var excel_data = $('#employee_table').html();
var page = "excel.php?data=" + excel_data;
window.location = page;
});
You can not send a complete html of a table in get request (Query string)
Just redirect user to excel.php page send required parameter in query string if required to create a sql query.
Then instead of echo $_GET["data"];
write complete code of demo.php on excel.php
Now excel.php will look like
<?php
header('Content-Type: application/vnd.ms-excel');
header('Content-disposition: attachment; filename='.rand().'.xls');
include 'include/db_connection.php';
$query = "select * from main_master";
$result = mysql_query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Export HTML table to Excel File using Jquery with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:700px;">
<h3 class="text-center">Export HTML table to Excel File using Jquery with PHP</h3><br />
<div class="table-responsive" id="employee_table">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="30%">Name</th>
<th width="10%">Gender</th>
<th width="50%">Designation</th>
</tr>
<?php
while($row = mysql_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $row['B']; ?></td>
<td><?php echo $row['D']; ?></td>
<td><?php echo $row['E']; ?></td>
<td><?php echo $row['F']; ?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<br />
</body>
</html>
And you can remove css and js files from it.
Also you need to update your script
<script>
$(document).ready(function(){
$('#create_excel').click(function(){
var page = "excel.php";
window.location = page;
});
});
</script>
Or you can try this lib (Datatable) : https://datatables.net/extensions/buttons/examples/initialisation/export.html
The datatable cdn is not working with a table that I call from another page using ajax. The new table gets generated, but it does not show the other features of the datatable in the table, and only show table on the page.
I have made a page which has a button, which calls a function that refreshes the table by ajax. I put the cdn datatable links and codes on the other page which is working fine when opened directly, but when called from ajax it doesn't show the datatable cdn function. Instead, the whole table is shown.
$(function() {
$('#populate').click(function() {
$.ajax
({
type: "POST",
url: "getPurchaseInvoice.php",
data: $('#frm3').serialize(),
success: function(data)
{
$('.example').html(data);
}
});
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table style="width:100%" border="1" class="example" data-page-length="25">
<thead>
<tr>
<th>S.No</th>
<th>Invoice No.</th>
<th>Date</th>
<th>Name</th>
<th>Total Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
while($row = mysql_fetch_assoc($rs)){
?>
<tr>
<td><?php echo $inc;?></td>
<td><?php echo $row['hrm_inv_no'];?></td>
<td><?php echo $row['fdate'];?></td>
<td><?php if($row['hrm_vendor_name'] != ''){ echo $row['hrm_vendor_name']; } else { echo "Other"; }?></td>
<?php /*?><td><?php echo $row['hrm_vendor_name'];?></td><?php */?>
<td><?php echo $row['hrm_net_value'];?></td>
<td align="center"><a class="iframef" href="purchaseinvoice.php?actiontype=print&id=<?php echo $row['hrm_inv_no'];?>"><img src="images/print.png" alt="Print"></a> | <img id="itemdel" title="Delete" onclick="deletePos('<?php echo $row['hrm_inv_no'];?>')" src="images/b_drop.png" style="cursor:pointer" alt="Delete"></td>
</tr>
<?php $inc++;
}
/*header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=Purchase-Invoice-".date('Y-m-d').".xls");
header("Pragma: no-cache");
header("Expires: 0");
*/
?>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="tableexport/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function() {
$('table.example').DataTable( {
dom: 'lBfrtip',
buttons: [
{
extend: 'excelHtml5',
text: 'Save Excel',
title: 'Purchase Invoice',
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr( 's', '42' );
}
},
{
extend: 'pdfHtml5',
text: 'Save Pdf',
title: 'Purchase Invoice'
}
]
} );
} );
</script>
<div id="purchaseInvoice">
<table style="width:100%" border="1" class="example" data-page-length="25">
<thead>
<tr>
<th>S.No</th>
<th>Invoice No.</th>
<th>Date</th>
<th>Name</th>
<th>Total Amount</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
If my understanding is good, you would like to load a php page containing a Datatable providing some data.
If so, the .load() method should be appropriate.
$('.example').load( "getPurchaseInvoice.php", $('#frm3').serialize());
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>
Add New Data<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>Edit | Delete</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>
Home
<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);
}
});
});
});
**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>
Add New Data<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>Edit | Delete</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>
Home
<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( {
} );
} );
$.ajax({
data :{"action": "showroom"} ,
url :"index.php",
type :'POST',
success: function(data){
$("#content").html(data);
}
});
}
Maybe this can help you. I use this to get data from the database.
$.ajax({
type: "GET",
url: "process.php",
success: function(data) {
if (data != "null") {
$('#div_id').html(data)
} else {
$('#div_id').html('<p>No Data found</p>')
}
}
})
you can check this for complete tutorial.how to fetch data from database in php using ajax with example