JQuery DataTable插件没有显示

时间:2015-04-06 00:53:49

标签: javascript jquery mysql twitter-bootstrap datatable

我有一个带有从MySQL数据库加载的表的引导页面。该表显示但没有显示所需的格式。

此表已在此处设置。

            <script type ="text/javascript" charset="utf-8">
            $(document).ready( function () {
            $('#job_table').DataTable();
            } ); >
            </script>

                <table id="job_table"
                       class = "table dataTable"
                       data-pagination ="true">
                    <thread>
                        <tr>
                            <th>#</th>
                            <th>Job Title </th>
                            <th>Company</th>
                            <th>Salary</th>
                            <th>Location</th>
                            <th>Date Posted</th>
                        </tr>
                    </thread>
                    <tbody>
                        <?php
                            $result = mysqli_query($link,"Select * From Jobs");

                            while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
                            ?>
                            <tr class="info">
                                <td></td>
                                <td><?=$row['job_id']?></td>
                                <td><?=$row['name']?></td>
                                <td><?=$row['comp_name']?></td>
                                <td><?=$row['pay']?></td>
                                <td><?=$row['location']?></td>
                                <td><?=$row['date_posted']?></td>                                                                </tr>
                        <?php
                                }
                                ?>

                    </tbody>

这就是我在标题部分

中的内容
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="starter-template.css" rel="stylesheet">

<script src="bootstrap/js/respond.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

该表显示数据,但表中的分页设置在添加时不执行任何操作。我必须在dataTable中设置表的Javascript也没有做任何事情。我不确定我错过了什么。

这是html表的来源。其余部分被省略,因为该表有大约500行数据。

<div class="tab-pane" id="joblist">
        <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">Active Employment Listings</h3>
            </div>
            <script type ="text/javascript" charset="utf-8">
            $(document).ready( function () {
            $('#job_table').DataTable();
            } ); >
            </script>

                <table id="job_table"
                       class = "table dataTable"
                       data-pagination ="true">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Job Title </th>
                            <th>Company</th>
                            <th>Salary</th>
                            <th>Location</th>
                            <th>Date Posted</th>
                        </tr>
                    </thead> 
                    <tbody>
                                                        <tr class="info">
                                <td></td>
                                <td>1</td>
                                <td>VP Marketing</td>
                                <td>Devify</td>
                                <td>22.38</td>
                                <td>222 Lillian Hill</td>
                                <td>2015-02-17</td> 
                             </tr>
                                                        <tr class="info">
                                <td></td>
                                <td>2</td>
                                <td>Administrative </td>
                                <td>Skiba</td>
                                <td>10.92</td>
                                <td>3 Corscot Terrace</td>
                                <td>2015-02-03</td> 
                             </tr>

0 个答案:

没有答案