ThinkPHP5.1+Ajax实现的无刷新分页功能示例

发布时间：2023-05-18 14:52:07

在实际开发中，分页功能是很常见的需求。而传统的分页方式都需要刷新整个页面才能显示下一页的数据，这样显然不太友好。因此，采用Ajax技术实现无刷新分页是一个不错的选择。本文将介绍如何利用ThinkPHP5.1框架中的Ajax方法实现无刷新分页功能。

#### 前提

- 本文默认您已经了解ThinkPHP框架的基本知识和Ajax技术。

- 分页数据是通过后端接口返回的，这里使用的是MySQL数据库。

- 前端使用Bootstrap框架。

#### 1. 创建控制器和模型

首先，我们需要创建一个数据模型和控制器来处理请求。

namespace app\index\controller;

use think\Controller;
use app\index\model\UserModel;

class Index extends Controller
{
    public function index()
    {
        //获取      页数据
        $userModel = new UserModel();
        $users = $userModel->getPageUsers();

        //获取总页数
        $count = $userModel->getCount();

        $this->assign('users', $users);
        $this->assign('count', $count);

        return $this->fetch();
    }
}

在上面的代码中，我们获取了页的用户数据，并将总页数和数据传递给模板。

接下来，我们需要创建一个模型来获取用户数据：

namespace app\index\model;

use think\Model;

class UserModel extends Model
{
    protected $table = 'users';

    //每页显示的记录数
    protected $perPage = 10;

    public function getPageUsers($page = 1)
    {
        $offset = ($page - 1) * $this->perPage;

        $users = $this->limit($this->perPage)
            ->offset($offset)
            ->order('id desc')
            ->select();

        return $users;
    }

    public function getCount()
    {
        $count = $this->count();

        return ceil($count / $this->perPage);
    }
}

上述代码中，我们定义了getPageUsers()方法和getCount()方法。getPageUsers()方法用于获取指定页数的用户数据，getCount()方法用于获取总页数。需要注意的是，我们在模型中定义了每页显示的记录数$perPage。

#### 2. 创建模板文件

接下来，我们需要创建一个模板文件来显示分页数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无刷新分页</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/jquery.js"></script>
</head>
<body>
<div class="container">
    <h1>无刷新分页</h1>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>邮箱</th>
            <th>创建时间</th>
        </tr>
        </thead>
        <tbody id="users-list">
        <?php foreach($users as $user): ?>
            <tr>
                <td><?php echo $user->id; ?></td>
                <td><?php echo $user->name; ?></td>
                <td><?php echo $user->age; ?></td>
                <td><?php echo $user->email; ?></td>
                <td><?php echo date('Y-m-d H:i:s', $user->create_time); ?></td>
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>

    <ul class="pagination">
        <?php for($i=1; $i<=$count; $i++): ?>
            <li><a class="page-link" href="javascript:void(0);" data-page="<?php echo $i; ?>"><?php echo $i; ?></a></li>
        <?php endfor; ?>
    </ul>
</div>

<script>
    $(document).ready(function () {
        //分页Ajax请求
        $('ul.pagination').on('click', 'a.page-link', function () {
            var page = $(this).data('page');
            $.ajax({
                url: '<?php echo url("index/getPageUsers"); ?>',
                type: 'get',
                data: {"page": page},
                success: function (res) {
                    $('#users-list').html(res);
                }
            });
        });
    });
</script>
</body>
</html>

在上述代码中，我们首先使用Bootstrap来美化页面。在表格中用foreach遍历拿到的数据，并展示出来。接着，在分页部分，我们使用了Bootstrap提供的分页组件ul.pagination来显示页码，并使用Ajax来处理点击页码时的请求。

需要注意的是，在分页组件中，我们使用了data-page属性来存储页码。

最后，我们使用了jQuery来监听分页请求，并使用Ajax来处理请求。在请求成功之后，用获取的返回数据去更新表格的内容。

#### 3. 实现分页请求处理

接下来，我们需要实现处理分页请求的方法。我们将在控制器中创建getPageUsers()方法：

public function getPageUsers(Request $request)
{
    $page = $request->get('page/d', 1);

    $userModel = new UserModel();
    $users = $userModel->getPageUsers($page);

    $this->assign('users', $users);

    return $this->fetch('index/userList');
}

在上述代码中，我们首先获取传递过来的页码。接着，我们调用模型中的getPageUsers()方法来获取指定页码的用户数据，然后将得到的数据传递给模板。

### 总结

到这里，我们就完成了ThinkPHP5.1中使用Ajax实现无刷新分页的功能。我们使用Bootstrap来美化页面，并使用jQuery来监听按钮点击事件和获取返回数据。后端使用框架提供的模型来获取数据，然后将数据传递给模板进行渲染。这种无刷新分页的方式更加友好，可以大大提高用户体验。