使用MySQL填充jQuery DataTable

时间:2014-07-02 03:32:09

标签: javascript php jquery html mysql

我试图在不使用AJAX的情况下使用来自MySQL数据库的信息填充jQuery DataTable。我宁愿只使用更简单的代码,因为这个项目应尽可能少。以下代码在我的HTML标记开始之前:

<?php
    //Connect to the MySQL database
    $usernameMain = "username"; 
    $passwordMain = "password"; 
    $hostMain = "host"; 
    $dbnameMain = "database";
    $optionsMain = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'); 
    $dbMain = new PDO("mysql:host={$hostMain};dbname={$dbnameMain};charset=utf8", $usernameMain, $passwordMain, $optionsMain);

    $sql = 'SELECT  name,date,location,entity,type FROM `events`';
    $result = $dbMain->query($sql);

?>

我已经生成了与我的数据库的连接(我删除了我的详细信息),并且还确保了导入jQuery DataTables的脚本文件。

在我的HTML文档中,我创建了一个表并试图用while循环回显这个数据库信息:

<table class="table table-hover table-nomargin table-bordered usertable"
    id="datatables">
        <thead>
            <tr class='thefilter'>
                <th class='with-checkbox'></th>
                <th>Name</th>
                <th>Location</th>
                <th>Type</th>
                <th>Date</th>
                <th>Entity</th>
                <th>Options</th>
            </tr>
            <tr>
                <th class='with-checkbox'><input id="check_all" name=
                "check_all" type="checkbox"></th>
                <th>Name</th>
                <th>Location</th>
                <th>Date</th>
                <th>Type</th>
                <th>Sponsoring Entity</th>
                <th>Options</th>
            </tr>
        </thead>

        <tbody>
            <!--Gather Rows from Database-->
            <?php
             $row = mysqli_fetch_array($result);
              while ($row)     {
             ?>

            <tr>
                <td class="with-checkbox"><input name="check" type="checkbox"
                value="1"></td>
                <td><?php echo $row['name']; ?></td>
                <td><?php echo $row['date']; ?></td>
                <td><?php echo $row['location']; ?></td>
                <td><?php echo $row['entity']; ?></td>
                <td><?php echo $row['type']; ?></td>
                <td>
                    <a class="btn icon-pencil" href="#" rel="tooltip" style=
                    "font-style: italic" title="Edit"></a> <a class=
                    "btn icon-plus-sign" href="#" rel="tooltip" style=
                    "font-style: italic" title="Enter Attendance"></a>
                </td>
            </tr>
            <?php
             }
            ?>
        </tbody>
    </table>

然后在创建此表之后,我插入了以下Javascript代码,以使用jQuery将表初始化为DataTable:

<script type="text/javascript">
(document).ready(function() {
    $('#datatables').dataTable( {
    } );
 );
</script>

我没有适当的声誉来上传图片,因此我创建了一张Imgur相册,其中包含我网站的数据库设置以及我在HTML页面中收到的错误:https://imgur.com/a/vacA4

我不确定问题是数据库连接,DataTables还是其他问题。我花了很多时间在这个问题上并继续遇到障碍。任何帮助将不胜感激。

提前感谢您的协助。

1 个答案:

答案 0 :(得分:0)

您可以使用dataTable的数据选项,并通过json_encode提供php数据结构

dataTable({
  ...
  data: <?phpecho json_encode($data_prepared_from_db); ?>
})