Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8">
- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
- <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- </head>
- <body >
- <div class="container">
- <br />
- <h3 align="center">QRCODE MODAL TEST</h3>
- <div class="row">
- <div class="col-md-12">
- <div class="panel-body">
- <?php
- include "dbcon.php";
- $query = "select * from employee";
- $result = mysqli_query($conn,$query);
- ?>
- <div class="table-responsive">
- <table class="table table-bordered" id="datatbl">
- <thead>
- <tr>
- <th>Name</th>
- <th>Position</th>
- <th>Office</th>
- <th>Age</th>
- <th>Salary</th>
- <th>QR CODE</th>
- </tr>
- </thead>
- <?php while($row = mysqli_fetch_array($result)){ ?>
- <tr>
- <td><?php echo $row['name']; ?></td>
- <td><?php echo $row['position']; ?></td>
- <td><?php echo $row['office']; ?></td>
- <td><?php echo $row['age']; ?></td>
- <td><?php echo $row['salary']; ?></td>
- <td><button data-id='<?php echo $row['id']; ?>' class="userinfo btn btn-success">VIEW</button></td>
- </tr>
- <?php } ?>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- AJAX -->
- <script type='text/javascript'>
- $(function(){
- $('.userinfo').click(function(){
- var userid = $(this).data('id');
- $.ajax({
- url: 'ajaxfile.php',
- type: 'post',
- data: {userid: userid},
- success: function(response){
- $('.modal-body').html(response);
- $('#empModal').modal('show');
- }
- });
- });
- });
- </script>
- </div>
- <div class="modal fade" id="empModal" role="dialog">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title">User Info</h4>
- <button type="button" class="close" data-dismiss="modal">×</button>
- </div>
- <div class="modal-body">
- <h1>test</h1>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
- </div>
- </div>
- </div>
- </div>
- <!-- DATATABLE -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
- <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
- <script type="text/javascript">
- $(document).ready( function () {
- $('#datatbl').DataTable({
- lengthMenu: [
- [5, 10, 25, 50, -1],
- [5, 10, 25, 50, 'All records'],
- ], "columnDefs": [
- {"className": "dt-center", "targets": "_all"}
- ],
- });
- } );
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement