'retrieve data from the database and load the data into the table using jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mdb.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript"
src="js/bootstrap-table.min.js"></script>
</head>
<body>
<!--Main Navigation-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark indigo">
<!-- Additional container -->
<div class="container">
<!-- Navbar brand -->
<!-- <a class="navbar-brand" href="#">Navbar</a>-->
<!-- Collapse button -->
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse"
id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<!-- <a class="nav-link
dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Dropdown</a>-->
<!-- <div
class="dropdown-menu dropdown-primary"
aria-labelledby="navbarDropdownMenuLink">
<a
class="dropdown-item" href="#">Action</a>
<a
class="dropdown-item" href="#">Another action</a>
<a
class="dropdown-item" href="#">Something else here</a>
</div>-->
</li>
</ul>
<!-- Links -->
<form class="form-inline my-2 my-lg-0 ml-auto">
<input class="form-control"
id="search" type="search" placeholder="Search" aria-label="search">
<button class="btn btn-outline-white
btn-" type="submit">Search</button>
</form>
</div>
</div>
<!-- Collapsible content -->
</div>
<!-- Additional container -->
</nav>
<h2 class='mb-3'>INDENT DETAILS</h2>
<!--<div class="container">
<div class="row">
<div class="col-md-2">EMPLOYEENAME</div>
<div class="col-md-2">INDENTNO</div>
<div class="col-md-2">INDENTSHORTDES</div>
<div class="col-md-2">INDENTDATE
</div>
</div>
</div>-->
<div class="container">
<table id ="table" data-toggle="table" class="tabletable-striped table-hover display" style="width:100%">
<thead>
<tr>
<th
data-field="EMPLOYEECODE"><span>EMPLOYEECODE</span></th>
<th
data-field="INDENTDATE"><span>INDENTDATE</span></th>
<th
data-field="INDENTNO"><span>INDENTNO</span></th>
<th
data-field="INDENTSHORTDES"><span>INDENTSHORTDES</span></th>
<th
data-field="REGISTEREDDATE"><span>REGISTEREDDATE</span></th>
<th
data-field="LINEITEMCODE"><span>LINEITEMCODE</span></th>
<!-- <th>
<button type="button" class=
"btn-blue btn-primary btn-sm">View details</button>
</th>-->
</tr>
</thead>
</table>
</div>
<!--/.Navbar-->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main class="mt-5">
<!--Main container-->
<div class="container">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-7 mb-4">
<div class="view overlay z-depth-1-half">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"
class="card-img-top" alt="">
<div class="mask rgba-white-light"></div>
</div>
</div>
<div class="col-md-5 mb-4">
<h2>INDENT DETAILS</h2>
<hr>
<p>To view indent details please go to search
option and give your <br>Employee ID and click to <b>VIEW INDENTS</b>
</p>
<!--<a href="https://mdbootstrap.com/"
class="btn btn-indigo">Get it now!</a>-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img
src="images/image6.jpg"
class="card-img-top"
alt="">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src=".jpg"
class="card-img-top"
alt="">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="view overlay">
<img src="" class="card-img-top"
alt="">
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer font-small indigo pt-4 mt-4">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<p>Designed & Developed by DISM, ISRO
Headquarters, Antariksh Bhavan, New BEL Road Bangalore- 560094</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3">
</div>
</div>
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a
href="https://mdbootstrap.com/bootstrap-tutorial/">MDBootstrap.com</a>
</div>
</footer>
<button>click</button>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
//url: 'http://localhost:8080/indentDetails/array.json',
url: 'coinsIndentsServlet?empid=TR10472',
type: 'GET',
dataType: 'json',
timeout: 2500,
"columns": [
{"data": "EMPLOYEECODE"},
{"data":" INDENTDATE"},
{"data":" INDENTNO"},
{"data":" INDENTSHORTDES"},
{"data":" REGISTEREDDATE"},
{"data":" LINEITEMCODE"}
],
success: function (result)
{
console.log('complete with success and
data:', result.indents);
$('#table').bootstrapTable('load', result.indents);
// $('#table tbody tr').each(function(){
// s=$('<span style=" left:10px;
right:30px; top:10px; bottom:10px">View details</span>');
// s.click(function(e){
// e.stopPropgation();
// alert('clicked');
//
// });
// $(this).append(s);
// });
}
});
// $('#table-anexo').DataTable({
// "ajax":'coinsIndentsServlet'
// });
});
</script>
</body>
</html>
i have created an application where an employee can see his all details once he gives his employeeid into search field . i have tired jquery and materialdesign bootstrap for this application i dont know what is issue , please suggest an answer for this . when an client wants to see his details he can just give an employeeid into the search placeholder and they can see the data into the table . here i am using bootstrap - JQuery i am trying to load the table with data from database using employeeID, when iam giving an employeeid into the search placeholder automatically table should be loaded with that particular employee details.
Solution 1:[1]
Here's how to show instant results from the value of an input via AJAX
HTML
<form method='post'>
<input type='text' id='search'>
</form>
<div id='mydiv'></div>
JS using jQuery 3.4.1
$(document).ready(function() { // Wait until document has loaded
function load_data(query) { // Begin function to load data from query
$.ajax({
url:"myserverfile.php", // Link to PHP file
method:"POST",
data:{query:query},
success:function(data){
$('#mydiv').html(data); // Show data in div
}
});
}
$('#search').keyup(function() { // Await keyboard entry on input
var search = $(this).val(); // Get value of input on keyboard entry
load_data(search); // Load the data from value of input
});
});
PHP
<?php
if(isset($_POST["query"])) {
require_once('db.php'); // Your SQL connection file
$query = mysqli_real_escape_string($con, $_POST["query"]); // Sanitize input
$select = mysqli_query($con,"select * from table where id like '%".$query."%'"); // Selecting the primary id key from the table (or any unique value)
if (mysqli_num_rows($select)> 0) { // If result
$rows = mysqli_fetch_assoc($select);
print_r($rows); // This prints an array, for nicer output create a while loop and specify indexes from the table.
} else {
echo "no data";
}
}
?>
Tested on a working server.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | SJacks |