1

I followed a basic tutorial relating to data table with bootstrap but it only works for hard coded data.

How do I get it to work if I want to display it dynamically? It is displaying it but the search and showing # of entries isn't working. It's also saying no data available in table when it's actually displaying 3 data from my database.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">



      </head>
    <body>
        <br/>
        <hr/>
        <?php
        require_once("/dao/CategoryDAO.php");
        require_once("/dao/TopicDAO.php");

        $category = new CategoryDAO();
        $topic = new TopicDAO();
        $allCategories_arr = $category->getAllCategories();
        $allTopics_arr = $topic->getAllTopicTitles();

        ?>
        <div class="container">
            <div class="row">
                <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>Category ID</th>
                        <th>Category Name</th>
                        <th>Action</th>
                    </tr>
                    <?php
                    foreach ($allCategories_arr as $ar) {
                        echo "<tr><th>".$ar['category_id']."</th><td>".$ar['categoryname']."</td><th><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></th></tr>";
                    }
                    ?>
                    </thead>
                    <tbody>


                    </tbody>
                </table>


            </div>
        </div>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script src="//code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#example').DataTable();
            } );
        </script>

    </body>
        </html>
Improve this question

3 Answers 3

Reset to default
1

Quick fixes, you should close your <thead> tag before you start your loop, and show the results inside the <tbody> once you inside the <tbody> you don't use the <th> tag anymore, you use your <tr>'s and <td>'s

This is how your code should look;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <br/>
        <hr/>
        <?php
            require_once("/dao/CategoryDAO.php");
            require_once("/dao/TopicDAO.php");

            $category = new CategoryDAO();
            $topic = new TopicDAO();
            $allCategories_arr = $category->getAllCategories();
            $allTopics_arr = $topic->getAllTopicTitles();

            ?>
        <div class="container">
            <div class="row">
                <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Category ID</th>
                            <th>Category Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            foreach ($allCategories_arr as $ar) {
                                echo "<tr>";
                                echo "<td>".$ar['category_id']."</td>";
                                echo "<td>".$ar['categoryname']."</td>";
                                echo "<td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a>";
                                echo "</tr>";
                            }
                            ?>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script src="//code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#example').DataTable();
            } );
        </script>
    </body>
</html>

Or Should look like this

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <br/>
        <hr/>
        <?php
            require_once("/dao/CategoryDAO.php");
            require_once("/dao/TopicDAO.php");

            $category = new CategoryDAO();
            $topic = new TopicDAO();
            $allCategories_arr = $category->getAllCategories();
            $allTopics_arr = $topic->getAllTopicTitles();

            ?>
        <div class="container">
            <div class="row">
                <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Category ID</th>
                            <th>Category Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            foreach ($allCategories_arr as $ar) :?>
                        <tr>
                            <td><?php echo $ar['category_id'] ;?></td>
                            <td><?php echo $ar['categoryname'];?></td>
                            <td><a href="ManageSubCategory.php?catid="<?php echo $ar['category_id'];?>">Show Sub Categories</a>
                        </tr>
                        <?php
                            endforeach;


                            ?>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script src="//code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#example').DataTable();
            } );
        </script>
    </body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much sir this worked for me! Godbless.
0

Write this code in body tag 

  <?php
                foreach ($allCategories_arr as $ar) {
                    echo "<tr><td>".$ar['category_id']."</td><td>".$ar['categoryname']."</td><td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></td></tr>";
                }
                ?>

i hope it's work

Improve this answer

Comments

0

set php foreach inside <tbody> not <thead> and change <th> in foreach to <td>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>Category ID</th>
                        <th>Category Name</th>
                        <th>Action</th>
                    </tr>

                    </thead>
                    <tbody>

<?php
                    foreach ($allCategories_arr as $ar) {
                        echo "<tr><td>".$ar['category_id']."</td><td>".$ar['categoryname']."</td><td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></td></tr>";
                    }
                    ?>
                    </tbody>
                </table>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.