Laravel Livewire 实时搜索中的分页错误：解决方案和 SEO 优化

2024-04-04 06:59:19

## Laravel Livewire 实时搜索中的分页错误

在使用 Laravel Livewire 构建实时搜索功能时，单击分页按钮可能导致页面加载错误的视图和数据。这是因为默认情况下，Livewire 在进行服务器调用（例如搜索请求）时会刷新整个页面。本指南介绍了解决此问题的两种方法。

### 使用 Livewire 组件进行分页

优点： 简单、无需更改控制器或视图文件。

步骤：

在 index.blade.php 中，使用 @livewire('parcels') 渲染 Livewire 组件。
创建一个名为 Parcels.php 的 Livewire 组件，负责分页并渲染结果。

namespace App\Http\Livewire;

use App\Models\Parcel;
use Livewire\Component;
use Livewire\WithPagination;

class Parcels extends Component
{
    use WithPagination;

    public $status;

    public function mount($status)
    {
        $this->status = $status;
    }

    public function render()
    {
        $parcels = Parcel::where('status', $this->status)->paginate(5);

        return view('user.parcels._list', compact('parcels'));
    }
}

### 使用 AJAX 在后台加载分页数据

优点： 性能更高、用户体验更佳。

步骤：

在 _list.blade.php 中，将分页元素更改为如下：

<div id="pagination-wrapper">
    <button id="load-more-btn" type="button" class="btn btn-primary">Load More</button>
</div>

添加以下脚本：

<script>
    $('#load-more-btn').click(function() {
        var page = parseInt($('#pagination').find('li.active a').attr('href').split('page=')[1]);
        page++;

        $.ajax({
            url: '/room/parcels/' + page,
            type: 'GET',
            success: function(response) {
                $('#parcels-wrapper').append(response);
                $('#pagination').find('li.active').removeClass('active');
                $('#pagination').find('a[href="/room/parcels/' + page + '"]').parent().addClass('active');
            },
            error: function() {
                alert('Error loading more parcels.');
            }
        });
    });
</script>