使用MySQL数据填充Web表

时间:2014-08-20 16:55:16

标签: php mysql html-table

我在这个网站上经历了大量的答案,但我根据他们的建议对我的代码所做的更改仍然没有让我找到解决方案。

尝试使用PHP调用MySQL数据库,以便使用办公室内部网页的信息填充此表。这是我现在拥有的代码:

<?php
    require_once 'login.php';
    $db_server = mysql_connect($db_hostname, $db_username, $db_password);

    if (!$db_server) die("Unable to connect to MySQL: " mysql_error());

    mysql_select_db($db_database, $db_server)
        or die("Unable to select database: " . mysql_error());

    $query = "Select * FROM tablename";
    $result = mysql_query($query);
    ?>
                        <table class="mainTable TableTools table-hover table-condensed table-small dataTable sortable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
                        <tr>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Blade Name:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    Blade Name
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Alias:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    Alias
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Chassis Name:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    Chassis Name
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="PDU:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    PDU
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Circuit Info:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    Circuit Info
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Description:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    Description
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Degraded:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    Degraded
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Blade Type:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    Blade Type
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                            <td class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Instance:activate to sort column ascending" style="width: 82px;">
                                <div class="DataTables_sort_wrapper">
                                    Instance
                                    <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>
                                </div>
                            </td>
                        </tr>
       <?php
        while ($row = mysql_fetch_array($result)) {
            echo "<tr>";
            echo "<td>" . $row[ServerName] . "</td>";
            echo "<td>" . $row[EncolsureName] . "</td>";
            echo "<td>" . $row[Rackname] . "</td>";
            echo "<td>" . $row[Health_State] . "</td>";
            echo "</tr>";
        }

       ?>

表格有点乱,因为我正在从已经存在的页面调整它,所以我试图模拟它的外观。你们中的任何人都可以指出我哪里出错了吗?我知道HTML,但我对PHP很缺乏经验,所以我觉得我错过了一些只是盯着我看的东西。

编辑:对不起,第一次真正在SE上发帖(如果你不知道的话),我已经打了一会儿反对这个,所以我空了。问题是页面显示表头,但没有其他内容。

1 个答案:

答案 0 :(得分:0)

在我看来,您正在复制使用dataTables jQuery插件的表。你不需要在所有这些类中进行硬编码,插件就是为你做的。

如果您希望自己的表格与他们一样,请查看jQuery,特别是dataTables并阅读文档。

它应该是这样的(在链接必备文件之后):

<table id="mytable">
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <!-- etc -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>content1</td>
            <td>content2</td>
            <!-- etc -->
        </tr>
        <tr>
            <td>content1</td>
            <td>content2</td>
            <!-- etc -->
        </tr>
    </tbody>
</table>

和javascript:

<script>
    $(document).ready(function(){
        $('#mytable').dataTable();
    });
</script>