Advertisement
notacoolkid

Untitled

Jan 6th, 2023 (edited)
891
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 4.10 KB | Help | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6.  
  7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  8. <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
  9.  
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  11. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  12.  
  13. </head>
  14. <body >
  15.  
  16.  
  17. <div class="container">
  18.    <br />
  19.    <h3 align="center">QRCODE MODAL TEST</h3>
  20.    <div class="row">
  21.     <div class="col-md-12">
  22.         <div class="panel-body">
  23.             <?php
  24.                 include "dbcon.php";
  25.                 $query = "select * from employee";
  26.                 $result = mysqli_query($conn,$query);
  27.             ?>
  28.             <div class="table-responsive">
  29.                 <table class="table table-bordered" id="datatbl">
  30.                     <thead>
  31.                         <tr>
  32.                        
  33.                             <th>Name</th>
  34.                             <th>Position</th>
  35.                             <th>Office</th>
  36.                             <th>Age</th>
  37.                             <th>Salary</th>
  38.                             <th>QR CODE</th>
  39.                         </tr>
  40.                         </thead>
  41.                         <?php while($row = mysqli_fetch_array($result)){ ?>
  42.                             <tr>
  43.                                
  44.                                 <td><?php echo $row['name']; ?></td>
  45.                                 <td><?php echo $row['position']; ?></td>
  46.                                 <td><?php echo $row['office']; ?></td>
  47.                                 <td><?php echo $row['age']; ?></td>
  48.                                 <td><?php echo $row['salary']; ?></td>
  49.                                 <td><button data-id='<?php echo $row['id']; ?>' class="userinfo btn btn-success">VIEW</button></td>
  50.                             </tr>
  51.                         <?php } ?>
  52.                 </table>
  53.  
  54.             </div>
  55.  
  56.         </div>    
  57.     </div>    
  58.  
  59.     </div>
  60.  
  61. <!--  AJAX -->
  62.             <script type='text/javascript'>
  63.             $(function(){
  64.                 $('.userinfo').click(function(){
  65.                     var userid = $(this).data('id');
  66.                     $.ajax({
  67.                         url: 'ajaxfile.php',
  68.                         type: 'post',
  69.                         data: {userid: userid},
  70.                         success: function(response){
  71.                             $('.modal-body').html(response);
  72.                             $('#empModal').modal('show');
  73.                         }
  74.                     });
  75.                 });
  76.             });
  77.             </script>
  78.         </div>
  79.         <div class="modal fade" id="empModal" role="dialog">
  80.                 <div class="modal-dialog">
  81.                     <div class="modal-content">
  82.                         <div class="modal-header">
  83.                             <h4 class="modal-title">User Info</h4>
  84.                           <button type="button" class="close" data-dismiss="modal">×</button>
  85.                         </div>
  86.                         <div class="modal-body">
  87.                             <h1>test</h1>
  88.                         </div>
  89.                         <div class="modal-footer">
  90.                           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  91.                         </div>
  92.                     </div>
  93.                 </div>
  94.                
  95.         </div>
  96.  
  97.  
  98. <!--  DATATABLE -->
  99. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  100. <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
  101.  
  102. <script type="text/javascript">
  103.     $(document).ready( function () {
  104.     $('#datatbl').DataTable({
  105.         lengthMenu: [
  106.             [5, 10, 25, 50, -1],
  107.             [5, 10, 25, 50, 'All records'],
  108.         ], "columnDefs": [
  109.         {"className": "dt-center", "targets": "_all"}
  110.       ],
  111.     });
  112. } );
  113. </script>
  114.     </body>
  115. </html>
  116.  
  117.  
  118.  
  119.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement