如何制作分页表？答案

【问题标题】：How to make paginated table?如何制作分页表？
【发布时间】：2017-01-19 22:43:04
【问题描述】：

我正在使用引导程序，并且我使用了一个表格来通过 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>

【问题讨论】：

标签： php jquery twitter-bootstrap pagination

【解决方案1】：

您可以使用 dataTables jQuery plugin：

对引导程序友好
包括分页，您只需要通过 jQuery 调整它的长度。

见下面的sn-p：

$('#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>

【讨论】：