如何制作分页表？

Question

I'm using bootstrap and I have used a table to echo users data by using PHP, the problem is that there's a lot of results, so I want to show pagination below that table, and I want to do this with jQuery if possible? If not I guess I will go for PHP.

How could I do it? I have tried several plugins and different methods, but actually I'm a beginner and it didn't work smoothly for me.

One of the jQuery plugins I tried is simplePagination.js but nothing is working.

My code:

<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

You could use dataTables jQuery plugin which:

• Is bootstrap friendly
• Includes pagination, you would only need to tweak it's length via jQuery.

See snippet below:

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

</div>