Untitled

<!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>