【问题标题】:PHP Tables with Pagination bootstrap带有分页引导的 PHP 表
【发布时间】:2017-08-20 00:27:15
【问题描述】:

我正在从 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>

【问题讨论】:

  • 通常对于仅使用 PHP 的分页,我会在查询中添加一个“限制”,以选择一个起点并限制多少个结果。如果限制为 5,则应该有两个变量。页 ($_GET['page']) 和限制 ($limit)。要获取起点,请使用 (($_GET['page'] - 1) * $limit)。在您的查询中使用这些变量。
  • 我怎样才能将它们添加到查询中只有两个变量?
  • 显示未定义变量页面
  • 如果 $offset = ($_GET['page'] - 1) * $limit 在查询中添加“limit $offset, $limit”
  • 在这种情况下,什么样的值变成 $limit ?在您的问题中,它没有定义。还有可变页面呢?

标签: php pagination html-table


【解决方案1】:

你可以使用数据表

  • Javascript 代码

    $(document).ready(function() { $('#example').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

【讨论】:

【解决方案2】:

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

【讨论】:

  • 在页面顶部包含 css,在 jquery 之后包含 js。然后调用 $('table').DataTable();
  • 我是 bootstrap、jQueries 和 DataTables 的新手。您能否对我的代码进行必要的更改
猜你喜欢
  • 2014-01-20
  • 1970-01-01
  • 2015-10-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-19
  • 2013-09-26
  • 1970-01-01
相关资源
最近更新 更多