thinkphp ajax无刷新分页

基础概念

ThinkPHP 是一个流行的 PHP 开发框架，它提供了丰富的功能和组件来简化 Web 开发。AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。无刷新分页是指通过 AJAX 技术实现页面内容的分页加载，而不需要用户点击分页链接时重新加载整个页面。

优势

用户体验：无刷新分页提供了更加流畅的用户体验，因为页面内容更新时不需要重新加载整个页面。
性能提升：减少了不必要的数据传输，提高了页面加载速度。
减轻服务器负担：每次只请求必要的数据，减少了服务器的处理压力。

类型

客户端分页：所有数据一次性加载到客户端，然后通过 JavaScript 在客户端进行分页。
服务器端分页：每次请求只加载当前页的数据，减少了数据传输量。

应用场景

适用于需要频繁进行数据分页展示的场景，如新闻列表、商品列表、用户列表等。

实现步骤

前端页面：创建一个分页的 HTML 结构，并绑定 AJAX 请求。
后端控制器：处理 AJAX 请求，返回当前页的数据。
JavaScript 代码：通过 AJAX 请求获取数据，并更新页面内容。

示例代码

前端页面（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无刷新分页示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="content">
        <!-- 数据展示区域 -->
    </div>
    <div id="pagination">
        <!-- 分页链接 -->
    </div>

    <script>
        $(document).ready(function() {
            function loadData(page) {
                $.ajax({
                    url: '/index.php/index/index/paginate',
                    type: 'GET',
                    data: { page: page },
                    success: function(data) {
                        $('#content').html(data.content);
                        $('#pagination').html(data.pagination);
                    }
                });
            }

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

            // 绑定分页链接点击事件
            $(document).on('click', '.page-link', function(e) {
                e.preventDefault();
                var page = $(this).data('page');
                loadData(page);
            });
        });
    </script>
</body>
</html>

后端控制器（ThinkPHP）

namespace app\index\controller;

use think\Controller;
use think\Db;

class Index extends Controller
{
    public function paginate()
    {
        $page = input('get.page', 1);
        $limit = 10;
        $data = Db::name('table_name')->paginate($limit, false, ['page' => $page]);

        $content = '';
        foreach ($data as $item) {
            $content .= '<div>' . $item['field_name'] . '</div>';
        }

        $pagination = $data->render();

        return json(['content' => $content, 'pagination' => $pagination]);
    }
}