Categories
Development

How to put many tables on a page using a multi-tab system?

I’m on a project where I’ve to show 4 tables on the same page. I found this : https://www.codeandcourse.com/how-to-display-data-from-mysql-database-into-html-table-using-php/.

I’ve tried to put it on a system using cards with tabs (like that https://bootsnipp.com/snippets/z2Q7x), but it unfortunately doesn’t work…

Actually, when I insert a table that show all the elements form my SQL database, I can’t see the end of my page… For example, I inserted a footer and I can’t see it if my table is on the page.

In fact, all the code that follow my table are missing on the final result.

Here is my actual work :

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">

    <div class="row">
        <div class="col-md-12">
            <div style="height: 2em"></div>
            <div class="card">
                <div class="card-header">
                    <h5>My tabs system</h5>
                    <ul class="nav nav-tabs card-header-tabs"> 
                        <li class="nav-item">
                            <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">First</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">Second</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"id="third-tab" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Third</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"id="fourth-tab" data-toggle="tab" href="#fourth" role="tab" aria-controls="fourth" aria-selected="false">Fourth</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="first" role="tabpanel" aria-labelledby="first-tab">
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                </tr>
                                        <?php
                                        $conn = mysqli_connect("localhost", "root", "", "company");
                                        // Check connection
                                        if ($conn->connect_error) {
                                        die("Connection failed: " . $conn->connect_error);
                                        }
                                        $sql = "SELECT id, username, password FROM login";
                                        $result = $conn->query($sql);
                                        if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["username"] . "</td><td>"
                                        . $row["password"]. "</td></tr>";
                                        }
                                        echo "</table>";
                                        } else { echo "0 results"; }
                                        $conn->close();
                                        ?>
                            </table>

                        </div>
                        <div class="tab-pane fade" id="second" role="tabpanel" aria-labelledby="second-tab">
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                </tr>
                                        <?php
                                        $conn = mysqli_connect("localhost", "root", "", "company");
                                        // Check connection
                                        if ($conn->connect_error) {
                                        die("Connection failed: " . $conn->connect_error);
                                        }
                                        $sql = "SELECT id, username, password FROM login";
                                        $result = $conn->query($sql);
                                        if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["username"] . "</td><td>"
                                        . $row["password"]. "</td></tr>";
                                        }
                                        echo "</table>";
                                        } else { echo "0 results"; }
                                        $conn->close();
                                        ?>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="third" role="tabpanel" aria-labelledby="third-tab">
                            <table class="table table-striped">
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                </tr>
                                        <?php
                                        $conn = mysqli_connect("localhost", "root", "", "company");
                                        // Check connection
                                        if ($conn->connect_error) {
                                        die("Connection failed: " . $conn->connect_error);
                                        }
                                        $sql = "SELECT id, username, password FROM login";
                                        $result = $conn->query($sql);
                                        if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["username"] . "</td><td>"
                                        . $row["password"]. "</td></tr>";
                                        }
                                        echo "</table>";
                                        } else { echo "0 results"; }
                                        $conn->close();
                                        ?>
                            </table>
                        </div>
                  <div class="tab-pane fade" id="fourth" role="tabpanel" aria-labelledby="fourth-tab">
                            <table class="table table-striped">
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                </tr>
                                        <?php
                                        $conn = mysqli_connect("localhost", "root", "", "company");
                                        // Check connection
                                        if ($conn->connect_error) {
                                        die("Connection failed: " . $conn->connect_error);
                                        }
                                        $sql = "SELECT id, username, password FROM login";
                                        $result = $conn->query($sql);
                                        if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["username"] . "</td><td>"
                                        . $row["password"]. "</td></tr>";
                                        }
                                        echo "</table>";
                                        } else { echo "0 results"; }
                                        $conn->close();
                                        ?>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div> 

    </div>
</div>

Thank you for your help !

Jojorealisateur

Leave a Reply

Your email address will not be published. Required fields are marked *