DataTables can’t read more than one Data

I would like to ask why is the DataTable can’t read more than 1 data in my Database? I would appreciate any help since I’m relatively new with the Data Table, thank you.

As you can see it’s only showing 1 to 1 of 1 entries. But as seen in the table I have 5 retrieved data.

and when I am trying to search in the search bar this shows up.

Here’s the code for the table.

<table class="table table-striped table-hover table-condense" id="tbl_research">
                <thead>
                    <tr>
                    <th scope="col">#</th>
                    <th scope="col">Resarch Title</th>
                    <th scope="col">Research Type</th>
                    <th scope="col">Research Author</th>
                    <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <?php
                    include 'includes/connection_operation.php';
                    $sql = "SELECT * FROM tbl_repository";
                    $query = mysqli_query($conn,$sql);

                    if($query)
                    {
                        while($row = mysqli_fetch_assoc($query))
                        {
                            ?>
                    <th><?php echo $row['ID']; ?></th>
                    <td><?php echo $row['research_title']; ?></td>
                    <td><?php echo $row['research_type']; ?></td>
                    <td><?php echo $row['research_author']; ?></td>
                    <td>
                        <input type="submit" name="submit" id="submit" value="View" class="btn btn-info" 
                        data-toggle="modal" data-target="#viewResearchModal<?php echo $row["ID"];?>">
                    </td>
                    </tr>
                </tbody>
                
                <?php 
                include './helper/modal_viewresearch.php';
                    }
                }
                ?>
                </table>

JavaScript
​x
 
<table class="table table-striped table-hover table-condense" id="tbl_research">                <thead>                    <tr>                    <th scope="col">#</th>                    <th scope="col">Resarch Title</th>                    <th scope="col">Research Type</th>                    <th scope="col">Research Author</th>                    <th scope="col">Action</th>                    </tr>                </thead>                <tbody>                    <tr>                    <?php                    include 'includes/connection_operation.php';                    $sql = "SELECT * FROM tbl_repository";                    $query = mysqli_query($conn,$sql);​                    if($query)                    {                        while($row = mysqli_fetch_assoc($query))                        {                            ?>                    <th><?php echo $row['ID']; ?></th>                    <td><?php echo $row['research_title']; ?></td>                    <td><?php echo $row['research_type']; ?></td>                    <td><?php echo $row['research_author']; ?></td>                    <td>                        <input type="submit" name="submit" id="submit" value="View" class="btn btn-info"                         data-toggle="modal" data-target="#viewResearchModal<?php echo $row["ID"];?>">                    </td>                    </tr>                </tbody>                                <?php                 include './helper/modal_viewresearch.php';                    }                }                ?>                </table>​

Here’s my code for my plugins/cdn

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>CRR | View Research</title>
    
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
    

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
            });
        });
    </script>
    <script>
        $(document).ready(function() {
        $(function () {
            $('[data-toggle="popover"]').popover()
        });

        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
        });
    </script>
    <script>
        $(document).ready(function() {
        $('#tbl_research').DataTable( {
        } );
    } );
    </script>
</body>

</html>

JavaScript
 
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="IE=edge">​    <title>CRR | View Research</title>        <!-- Bootstrap CSS CDN -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">    <!-- Our Custom CSS -->    <link rel="stylesheet" href="css/style.css">    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">    ​    <!-- Font Awesome JS -->    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script></head>​<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>    <!-- Bootstrap JS -->    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {            $('#sidebarCollapse').on('click', function () {                $('#sidebar').toggleClass('active');            });        });    </script>    <script>        $(document).ready(function() {        $(function () {            $('[data-toggle="popover"]').popover()        });​        $(function () {            $('[data-toggle="tooltip"]').tooltip()        })        });    </script>    <script>        $(document).ready(function() {        $('#tbl_research').DataTable( {        } );    } );    </script></body>​</html>​

Answer

I had to re-read my whole code for 3 times and the reason it only shows 1 is that the tbody was inside the loop, so it only sees 1. I had to move it outside the while loop so the data should be in one tbody thank you.

Advertisement

Answer