CODEWITHSUNDEEP
javascriptphpjqueryhtmldatatables
Gowxtar100
Gowxtar100

Reputation: 38

JQuery Datatable is only working with empty (no data) tables

When the table is empty, Datatables works and shows no data available ( with pages and search etc..) But when a single row is inserted, Datatables breaks. I am getting the data to the table using PHP and has used this method in the past and worked fine.

I am assuming that since it works with empty tables, the problem is not with the linking of scripts etc. Any help would be great, thank you.

I have tried to see if there is a problem within the HTML by correcting tags etc but I cant seem to identify the problem.

<div class="tab-pane active" id="queries">
                <hr>
                  <table id="table1" class="table table-striped ">
            <thead>
                <tr class="sticky" >
                    <th>Date of Complaint</th>

                    <th>Reference</th>
                    <th>Name</th>
                    <th>Surname</th>

                    <th>Subject</th>


                    <th> </th>


                </tr>
             </thead>
                <?php
                    //process $result

                echo "<tbody>";


                    while ($row = mysqli_fetch_assoc($queriesresult2)) {     
                        ;
                        echo "<tr>";

                        echo "<td>".$row['Data1']."</td>";
                       echo "<td>".$row['Data2']."</td>";
                       echo "<td>".$row['Data3']."</td>";
                       echo "<td>".$row['Data4']."</td>";
                        echo "<td>".$row['Data5']."</td>";

                        echo "<td><a class=\"btn btn-danger\" href=\"editQUERY?id=".$row['id']."\">Edit</a></td>";

                        echo "</tr>";


                    }


                echo "</tbody>";


                ?>
            </table>

              <hr>

             </div>

Upvotes: 0

Views: 1317

Answers (1)

Osman Omar
Osman Omar

Reputation: 453

I see you use bootstrap dataTables. Try this code, it should work and you will have your search bars:

<html>
    <head>
          <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
         <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
         <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
         <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

         <div class="tab-pane active" id="queries">
            <hr>
              <table id="example" class="display" width="100%">
                  <thead>
                      <tr>
                          <th>Name</th>
                          <th>Position</th>
                          <th>Office</th>
                          <th>Extn.</th>
                          <th>Start date</th>
                          <th>Salary</th>
                      </tr>
                  </thead>
                  <tbody>
                      <?php while ($row = mysqli_fetch_assoc($queriesresult2)) { ?>
                         <tr>
                             <td><?= $row['data1'] ?></td>
                             <td><?= $row['data2'] ?></td>
                             <td><?= $row['data3'] ?></td>
                             <td><?= $row['data4'] ?></td>
                             <td><?= $row['data5'] ?></td>
                             <td><a class="btn btn-danger" href="editQUERY?id="<?= $row['id'] ?>">Edit</a></td>
                         </tr>
                      <?php } ?>
                  </tbody>
              </table>
        </div>
        <script>

             $(document).ready(function() {
                  $('#example').DataTable( {} );
             } );
        </script>
    </body>
 </html>

Upvotes: 1

Related Questions