如何在数据表中显示数据库中的数据答案

【问题标题】：How to display data from database in a datatable如何在数据表中显示数据库中的数据
【发布时间】：2017-01-18 13:40:16
【问题描述】：

我遵循了与引导数据表相关的基本教程，但它仅适用于硬编码数据。

如果我想动态显示它，如何让它工作？它正在显示它，但搜索和显示条目数不起作用。当它实际显示我的数据库中的 3 个数据时，它还表示表中没有可用的数据。

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

【问题讨论】：

标签： javascript php mysql twitter-bootstrap datatables

【解决方案1】：

快速修复，您应该在开始循环之前关闭 <thead> 标签，并在 <tbody> 内显示结果你的<tr>'s and <td>'s

您的代码应该是这样的；

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

或者应该是这样的

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

【讨论】：

非常感谢先生，这对我有用！上帝保佑。

【解决方案2】：

把这段代码写在body标签里

  <?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>";
                }
                ?>

希望能成功

【讨论】：

【解决方案3】：

在<tbody> 中设置php foreach 而不是<thead> 并将foreach 中的<th> 更改为<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>

【讨论】：