帶分頁引導程序的PHP表
[英]PHP Tables with Pagination bootstrap
問題描述
我正在從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>
2 個解決方案
解決方案1
1 2015-08-10 12:44:17
您可以使用數據表
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
0 2015-08-10 12:37:02
您需要使用數據表，JavaScript插件。 https://www.datatables.net/
PHP分頁查詢多個表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.