Question

我从PHP表引导程序中获取数据库数据。我想要的是现在进行分页，因为我得到的表是长的，我希望例如6行/页。这是我使用DataTables插件的代码，但它无法正常工作：/任何人都可以帮助我吗？

 <html>
 <!-- DataTables CSS -->
 <link rel="stylesheet" type="text/css"           href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> 
 <!-- jQuery -->
 <script type="text/javascript" charset="utf8"    src="//code.jquery.com/jquery-1.11.1.min.js"></script >
 <!-- DataTables -->
  <script type="text/javascript" charset="utf8"       src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script> 

<div class="container">
<div class="row vertical-center-row">
    <div class="col-lg-12">
        <div class="row">
         <div class="table-responsive">
</div> 
</div>
</div>
</div>
                <div class="col-xs-4 col-xs-offset-4">
            <table id="table" class="table table-striped" cellspacing="0" width="100%">
            <h3>Update/Remove Access Rights</h3>
            <thead>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Nickname</th>
    <th> Door Description </th>

  </tr>
</thead>
<tbody>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#table').dataTable( {
    "pagingType": "full_numbers"
} );
} );
 </script>
  <?php 
    $stmt="select id_access_rights,name,surname,nickname, description 
           from users
           join access_rights on users.rfidcode=access_rights.users_rfidcode
           join doors 
           on doors.id_doors=access_rights.doors_id_doors
           order by name ";

    $result=$conn->query($stmt);
    if($result === FALSE) { 
  die(mysqli_error()); // TODO: better error handling
 }
                while($row =$result->fetch_assoc()){

                    $f1=$row['id_access_rights'];
                    $f2=$row['name'];
                    $f3=$row['surname'];
                    $f4=$row['nickname'];
                    $f5=$row['description'];
                    ?>
 <tr>
 <td><?php echo $f1 ?>
<td><?php echo $f2 ?>
<td><?php echo $f3 ?>
<td><?php echo $f4 ?>
<td><?php echo $f5 ?>
<td><?php echo "<a href='updateAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Update";?>
<td><?php echo "<a href='deleteAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Remove";?>
</td>
<?php 
}
?>  
</tr>
</table>
</tbody>
</table>
            <br>
    </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

Answer 1

您可以使用数据表

Javascript代码

$（document）.ready（function（）{ $（ '＃示例'）的dataTable（）; }）; 除了上面的代码之外，还加载了以下Javascript库文件以供在此示例中使用：

// code.jquery.com/jquery-1.11.1.min.js //cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js //cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js

HTML代码

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>

        </tbody>
    </table>

CSS代码 -

body { font-size: 140%; }

加载以下CSS库文件以在此示例中使用以提供表的样式：

// maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css //cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css

请参阅此以获取更多详情 - https://datatables.net/examples/styling/bootstrap.html

Answer 2

您需要使用数据表，javascript插件。 https://www.datatables.net/

带有分页引导程序的PHP表

2 个答案: