dongyi6195
2017-01-16 16:16
浏览 35

如何制作分页表?

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douke3442 2017-01-19 14:43
    已采纳

    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>
    
    点赞 打赏 评论

相关推荐 更多相似问题