Question

I’m attempting to display data from a MySQL table in a jQuery table (from http://www.datatables.net). With pure HTML text the jQuery table features work perfectly, however as soon as I pull in the data from the database, all of the jquery table functionality stops working (sorting, searching, pagination, etc.)

I’ve googled the heck out of it and first started building my own pagination feature, but then I realized that all of the jQuery features on the table were disabled, so I’m assuming something in my code is disabling those.

I’ve placed the full table code below:

        <!-- table -->
        <div class="row-fluid sortable">        
            <div class="box span12">
                <div class="box-header" data-original-title>
                    <h2><i class="halflings-icon user"></i><span class="break"></span>Tickets</h2>
                    <div class="box-icon">
                        <a href="#" class="btn-setting"><i class="halflings-icon wrench"></i></a>
                        <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
                        <a href="#" class="btn-close"><i class="halflings-icon remove"></i></a>
                    </div>
                </div>




                <div class="box-content">
                    <?php
                    $username="dbusername";
                    $password="password";
                    $database="dbname";

                    mysql_connect(localhost,$username,$password);
                    @mysql_select_db($database) or die( "Unable to select database");



                    $query="SELECT * FROM jobs ORDER BY job_date DESC LIMIT 50";
                    $result=mysql_query($query);

                    $num=mysql_numrows($result);

                    mysql_close();
                    ?>
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                      <thead>
                          <tr>
                              <th>Name</th>
                              <th>Job</th>
                              <th>Date</th>
                              <th>Time</th>
                              <th>Actions</th>
                          </tr>
                      </thead>
                      <?php
                        $i=0;
                        while ($i < $num) {

                        $f1=mysql_result($result,$i,"job_id");
                        $f2=mysql_result($result,$i,"job_title");
                        $f3=mysql_result($result,$i,"job_duration");
                        $f4=mysql_result($result,$i,"job_rigid");
                        $f5=mysql_result($result,$i,"job_userid");
                        ?>     
                      <tbody>
                        <tr>
                            <td><?php echo $f1; ?></td>
                            <td class="center"><?php echo $f2; ?></td>
                            <td class="center"><?php echo $f3; ?></td>
                            <td class="center"><span class="label label-success"><?php echo $f4; ?></span>
                            </td>
                            <td class="center">
                                <a class="btn btn-success" href="#">
                                    <i class="halflings-icon zoom-in halflings-icon"></i>  
                                </a>
                                <a class="btn btn-info" href="#">
                                    <i class="halflings-icon edit halflings-icon"></i>  
                                </a>
                                <a class="btn btn-danger" href="#">
                                    <i class="halflings-icon trash halflings-icon"></i> 
                                </a>
                            </td>
                        </tr>

                      </tbody>
                      <?php 
                        $i++;
                        }
                        ?>
                  </table>        
                </div>
            </div><!--/span-->

        </div><!--/row-->

                <!-- end: Content -->
        </div><!--/#content.span10-->
            </div><!--/fluid-row-->

Answer 1

It is probably because you put <tbody> inside the while loop.