thinkphp分页局部刷新

基础概念

ThinkPHP 是一个流行的 PHP 开发框架，它提供了丰富的功能和灵活的架构，使得开发者可以快速构建高质量的 Web 应用程序。分页是 Web 应用程序中常见的功能，用于将大量数据分成多个页面显示，以提高用户体验和性能。

局部刷新是指在不重新加载整个页面的情况下，只更新页面的一部分内容。这种技术通常通过 AJAX（Asynchronous JavaScript and XML）实现，可以显著提高 Web 应用程序的响应速度和用户体验。

优势

提高性能：局部刷新只加载和更新需要更新的部分，减少了数据传输量，提高了页面加载速度。
提升用户体验：用户不需要等待整个页面重新加载，只需等待部分内容更新，提升了交互体验。
减少服务器负载：由于每次只处理部分数据，减少了服务器的计算和响应时间。

类型

客户端分页：数据一次性加载到客户端，通过 JavaScript 实现分页逻辑。
服务器端分页：每次请求只加载当前页的数据，减少了数据传输量。

应用场景

适用于需要展示大量数据的页面，如新闻列表、商品列表、用户列表等。

实现方法

以下是一个使用 ThinkPHP 和 AJAX 实现分页局部刷新的示例：

后端（ThinkPHP）

// 控制器方法
public function index()
{
    $page = input('page', 1); // 获取当前页码，默认为第一页
    $limit = 10; // 每页显示的数据条数

    $data = Db::name('table_name')->paginate($limit, false, ['page' => $page]); // 分页查询数据

    return json($data); // 返回 JSON 格式的分页数据
}

前端（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="content">
        <!-- 数据展示区域 -->
    </div>
    <div id="pagination">
        <!-- 分页按钮 -->
    </div>

    <script>
        $(document).ready(function() {
            function loadData(page) {
                $.ajax({
                    url: '/index/index', // 后端接口地址
                    type: 'GET',
                    data: { page: page },
                    dataType: 'json',
                    success: function(data) {
                        var html = '';
                        $.each(data.data, function(index, item) {
                            html += '<div>' + item.name + '</div>'; // 根据实际数据结构生成 HTML
                        });
                        $('#content').html(html);

                        // 生成分页按钮
                        var paginationHtml = '';
                        for (var i = 1; i <= data.last_page; i++) {
                            paginationHtml += '<button class="page-btn" data-page="' + i + '">' + i + '</button>';
                        }
                        $('#pagination').html(paginationHtml);
                    }
                });
            }

            // 初始加载第一页数据
            loadData(1);

            // 点击分页按钮加载对应页的数据
            $(document).on('click', '.page-btn', function() {
                var page = $(this).data('page');
                loadData(page);
            });
        });
    </script>
</body>
</html>