如何製作分頁表格？

Question

我正在使用引導程序，並且我使用了一個表來通過使用PHP來回顯用戶數據，問題是有很多結果，所以我想在該表下面顯示分頁，並且我想用jQuery執行此操作可能？如果不是，我想我會去PHP。

我該怎麼辦？ 我嘗試了幾個插件和不同的方法，但實際上我是一個初學者，它對我來說並不順利。

我試過的jQuery插件之一是simplePagination.js，但沒有任何工作。

我的代碼：

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th width="30%">User Name</th> 
      <th width="35%">Email</th> 
      <th width="30%">Phone</th> 
      <th width="5%">Option</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr id="users"> 
      <th><?php echo $row['mem_uname']; ?></th> 
      <td><?php echo $row['mem_email']; ?></td> 
      <td><?php echo $row['mem_phone']; ?></td> 
      <td> 
       <a class="btn btn-danger option" 
       href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

你可以使用dataTables jQuery plugin其中：

• 是引導友好
• 包括分頁，你只需要調整它的長度通過jQuery。

下面

見片段：

$('#myTable').dataTable({ 
 
    "pageLength": 4 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script> 
 
<table id="myTable" class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th width="30%">User Name</th> 
 
     <th width="35%">Email</th> 
 
     <th width="30%">Phone</th> 
 
     <th width="5%">Option</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="users"> 
 
     <th>TEST</th> 
 
     <td>TEST</td> 
 
     <td>TEST</td> 
 
     <td> 
 
     <a class="btn btn-danger option" href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
 
     </td> 
 
    </tr> 
 
    <tr id="users"> 
 
     <th>TEST</th> 
 
     <td>TEST</td> 
 
     <td>TEST</td> 
 
     <td> 
 
     <a class="btn btn-danger option" href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
 
     </td> 
 
    </tr> 
 
    <tr id="users"> 
 
     <th>TEST</th> 
 
     <td>TEST</td> 
 
     <td>TEST</td> 
 
     <td> 
 
     <a class="btn btn-danger option" href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
 
     </td> 
 
    </tr> 
 
    <tr id="users"> 
 
     <th>TEST</th> 
 
     <td>TEST</td> 
 
     <td>TEST</td> 
 
     <td> 
 
     <a class="btn btn-danger option" href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
 
     </td> 
 
    </tr> 
 
    <tr id="users"> 
 
     <th>TEST</th> 
 
     <td>TEST</td> 
 
     <td>TEST</td> 
 
     <td> 
 
     <a class="btn btn-danger option" href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
 
     </td> 
 
    </tr> 
 
    <tr id="users"> 
 
     <th>TEST</th> 
 
     <td>TEST</td> 
 
     <td>TEST</td> 
 
     <td> 
 
     <a class="btn btn-danger option" href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
 
     </td> 
 
    </tr> 
 
    <tr id="users"> 
 
     <th>TEST</th> 
 
     <td>TEST</td> 
 
     <td>TEST</td> 
 
     <td> 
 
     <a class="btn btn-danger option" href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
 
     </td> 
 
    </tr> 
 
    <tr id="users"> 
 
     <th>TEST</th> 
 
     <td>TEST</td> 
 
     <td>TEST</td> 
 
     <td> 
 
     <a class="btn btn-danger option" href="home?p=Users&delete=<?php echo $row['mem_id'];?>">Delete</a> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>