JQuery Datatable仅适用于空（无数据）表

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. 当表为空时，Datatables起作用并且不显示任何可用数据（包括页面和搜索等。）但是，当插入一行时，Datatables会中断。 I am getting the data to the table using PHP and has used this method in the past and worked fine. 我正在使用PHP将数据获取到表中，并且过去曾经使用过此方法并且运行良好。

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. 我试图通过更正标签等来查看HTML中是否存在问题，但我似乎无法识别出问题。

<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>

Answer 1

I see you use bootstrap dataTables . 我看到您使用引导程序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>

JQuery Datatable仅适用于空（无数据）表

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-07-25 09:35:11

JQuery Datatable仅适用于空（无数据）表

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-07-25 09:35:11

解决方案1
0 已采纳 2019-07-25 09:35:11