Как сделать разбитый на стол стол?

Question

Я использую bootstrap, и я использовал таблицу для эхо-данных пользователей с помощью PHP, проблема в том, что есть много результатов, поэтому я хочу показать разбиение на страницы ниже этой таблицы, и я хочу сделать это с помощью jQuery if возможное? Если нет, я думаю, что поеду на 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>