如何制作分页表格？

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>