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

Question

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>

Data does appear from the database(the php script is fine), however it does not link with Datatables (so there is no search or pages) but instead just one giant table. But when empty it does seem to work as 'No data available' and the search and page numbers are shown — Gowxtar100
– Gowxtar100, Commented Jul 25, 2019 at 8:03
Maybe there's some problem with the data itself coming from the database, so that it produces invalid html? Have you tried to render the table lines only with dummy data, something like echo "<td>Test1</td>"; instead of echo "<td>".$row['Data1']."</td>";? — Tobias Weichart
– Tobias Weichart, Commented Jul 25, 2019 at 8:35

Osman Omar · Accepted Answer · 2019-07-25 09:35:11Z

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>

Tip: don't use echo for every html tag. You can use it the way I use in my answer. It's more clean and easy to understand.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related