Untitled

<head>
    <title>Data Tables</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">

    <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/1.10.16/js/dataTables.bootstrap.min.js"></script>
</head>
<style>
td.details-control {
    background: url('../assets/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../assets/details_close.png') no-repeat center center;
}
</style>
<body>
<header>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
                <div class="navbar-header">
                  <h4 stye="color:grey"> [IF635] Web Programming </h4>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Students</a></li>
      </ul>
    </div>
  </nav>
</header>
<div class="container col-5">
<table id="example" class="table table-striped table-bordered" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>Last Name</th>
                <th>Title</th>
                <th>Extension</th>
                <th>Full Name</th>
                <th>Birth Date</th>
                <th>Address</th>
                <th>City</th>
                <th>Home Phone</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Last Name</th>
                <th>Title</th>
                <th>Extension</th>
                <th>Full Name</th>
                <th>Birth Date</th>
                <th>Address</th>
                <th>City</th>
                <th>Home Phone</th>
            </tr>
        </tfoot>
        <tbody id="tbody">
            <?php
                $host = "localhost";
                $username = "root";
                $dbname = "northwind";
                $password = "";

                $conn = new mysqli($host, $username, $password, $dbname);

                $query = "SELECT * FROM Employees LIMIT 12";
                $res = $conn->query($query);

                while($row = $res->fetch_assoc()){
                  echo "<tr>";
                  echo "<td class=\"details-control\"></td>";
                  echo "<td>" . $row['LastName'] . "</td>";
                  echo "<td>" . $row['Title'] . "</td>";
                  echo "<td>" . $row['Extension'] . "</td>";
                  echo "<td>" . $row['FirstName'] . " " . $row['LastName'] . "</td>";
                  echo "<td>" . $row['BirthDate'] . "</td>";
                  echo "<td>" . $row['Address'] . "</td>";
                  echo "<td>" . $row['City'] . "</td>";
                  echo "<td>" . $row['HomePhone'] . "</td>";
                  echo "</tr>";
                }

                mysqli_free_result($res);
                mysqli_close($conn)
            ?>
        </tbody>
    </table>
</div>
</body>

<script>
  function format ( d ) {
    // `d` is the original data object for the row
    return '<table id="example" class="table table-striped table-bordered" cellspacing="0">'+
        '<tr>'+
            '<td>Full Name:</td>'+
            '<td>'+d.fullName+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Birth Date:</td>'+
            '<td>'+d.birthDate+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Address</td>'+
            '<td>'+d.address+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>City</td>'+
            '<td>'+d.city+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Home Phone</td>'+
            '<td>'+d.homePhone+'</td>'+
        '</tr>'+
    '</table>';
  }

  $(document).ready(function() {
    var table = $('#example').DataTable( {
        columnDefs: [
        { targets: [0, 1,2,3], visible: true},
        { targets: '_all', visible: false }
    ],
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "lastName" },
            { "data": "title" },
            { "data": "extension" },
            { "data": "fullName" },
            { "data": "birthDate" },
            { "data": "address" },
            { "data": "city" },
            { "data": "homePhone" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );
</script>