Question

我正在学习bootstrap的处理，我想用bootstrap 4实现datatable插件。我得到它的工作，但由于某种原因，tabledata插件缩放所有错误，看起来不像datatable网站上的示例。我需要帮助来弄清楚如何解决这个问题。我已经链接了bootstrap和datatable的所有必要链接。这是我的表的代码：

  <div class="container-fluid">
      <div class="row">
          <div class="col-md-2">
              <div id="list-example" class="list-group">
                <a class="list-group-item list-group-item-action" href="#list-item-1">Oversikt</a>
                <a class="list-group-item list-group-item-action" href="#list-item-2">Nyheter</a>
                <a class="list-group-item list-group-item-action" href="#list-item-3">Brukere</a>
                <a class="list-group-item list-group-item-action" href="#list-item-4">Kalender</a>
              </div>
          </div>
          <div class="col-md-10">
              <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
                  <div class="table-responsive">
                    <table id="alleNyheter" class="table table-bordered table-striped table-hover" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Emne:</th>
                                <th>Overskrift:</th>
                                <th>Tekstfelt:</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tr>
                            <?php 

                            $sql = "SELECT * FROM Artikkel ORDER BY artikkelNr DESC";
                            $resNyhet = $db->query($sql);
                            while($row = mysqli_fetch_array($resNyhet))  
                            {  
                            ?>  
                                <td><?php echo $row["emne"]; ?></td>
                                <td><?php echo $row["overskrift"]; ?></td>
                                <td><?php echo $row["tekstfelt"]; ?></td>
                                <td><a class="btn btn-default" href="editPage.php?rediger=<?php echo $row["artikkelNr"]; ?>">Rediger</a> <a class='btn btn-danger' href="adminDashboard.php?delete=<?php echo $row["artikkelNr"]; ?>" onclick="return confirm('Er du sikker?')">Slett</a></button></td> 
                            </tr>  
                            <?php  
                            }  
                            ?> 
                        </table>
                    </div>
                    <br>
                    <div class="table-responsive">
                                <table id="brukere" class="table table-striped table-hover table-bordered">
                                    <thead>
                                        <tr>
                                            <td>Bruker:</td>
                                            <td>Epost:</td>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <?php 

                                    $sql = "SELECT * FROM Admin";
                                    $resBruker = $db->query($sql);
                                    while($row = mysqli_fetch_array($resBruker))  
                                    {  
                                    ?>  
                                         <td><?php echo $row["brukernavn"]; ?></td> 
                                         <td><?php echo $row["epost"]; ?></td>
                                         <td><a class='btn btn-danger' href="brukere.php?deleteBruker=<?php echo $row["idAdmin"]; ?>" onclick="return confirm('Er du sikker?')">Slett</a></td>
                                    </tr>  
                                    <?php  
                                    }  
                                    ?>
                                </table>
                    </div>
              </div>
          </div>
      </div>
  </div>

这是我用于显示数据表的js代码。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">
        $(document).ready(function(){
            $("#brukere").DataTable({
                "language": {
                "decimal":        "",
                "emptyTable":     "Det er foreløpig ingen innlegg",
                "info":           "Viser _START_ til _END_ av _TOTAL_ innlegg",
                "infoEmpty":      "Viser 0 av 0 av totalt 0 innlegg",
                "infoFiltered":   "(_MAX_ total entries)",
                "infoPostFix":    "",
                "thousands":      ",",
                "lengthMenu":     "Vis _MENU_ innlegg",
                "loadingRecords": "Laster inn...",
                "processing":     "Behandler...",
                "search":         "Søk: ",
                "zeroRecords":    "Fant ingen innlegg. Prøv igjen",
                "paginate": {
                    "first":      "Første",
                    "last":       "Siste",
                    "next":       "Neste",
                    "previous":   "Forrige"
                },
                "aria": {
                    "sortAscending":  ": activate to sort column ascending",
                    "sortDescending": ": activate to sort column descending"
                }
            }
            });
        });
    </script>

但由于某种原因，该表看起来像这样：

为什么它看起来不像这样？

Answer 1

您的PHP代码没有为表格生成正确的HTML标记。您需要在tr循环中包含while元素。

例如：

<?php
while($row = mysqli_fetch_array($resBruker))  
{  
?>
<tr>
   <td>...</td>
   <td>...</td>
   <td>...</td>
</tr>
<?php
}  
?>

数据表布局看起来不像它应该的那样

1 个答案: