请求排查Livewire状态过滤按钮失效：点击后表格无响应

你的状态过滤按钮点击后无反应，核心原因是查询构造器的逻辑错误，同时还有几个细节需要优化，以下是具体问题和修复步骤：

1. 查询逻辑错误（最关键） #

在dataList()方法中，when处理状态过滤后直接使用orWhere，导致状态条件与搜索条件变成OR关系：

return Retail::when($this->s, function($query, $s){
     return $query->where('status', $s);
})
->orWhere('id_retail', 'LIKE', '%'.$this->searchTerm.'%')
->orWhere('name', 'LIKE', '%'.$this->searchTerm.'%')

这意味着：即使设置了状态过滤，只要记录符合搜索条件（或搜索为空时，orWhere相当于无限制），都会被查询出来，完全覆盖了状态过滤的效果。

修复方式 #

把搜索条件包裹在when里，并且用where组来保证逻辑正确：

public function dataList(){
    return Retail::when($this->s, function($query, $s){
         return $query->where('status', $s);
    })
    ->when($this->searchTerm, function($query){
        // 用where组把搜索条件包裹，保证和状态过滤是AND关系
        return $query->where(function($q){
            $q->where('id_retail', 'LIKE', '%'.$this->searchTerm.'%')
              ->orWhere('name', 'LIKE', '%'.$this->searchTerm.'%');
        });
    })
    ->orderBy($this->sortColumnName, $this->sortDirection)
    ->paginate($this->showData);
}

2. 过滤状态丢失问题 #

$s没有加入queryString配置，导致刷新页面后过滤状态会重置为null，需要添加：

protected $queryString = [
    'searchTerm' => ['except' => ''],
    's' => ['except' => null] // 新增这行
];

3. 切换过滤时重置分页 #

切换状态过滤时，如果当前页码大于过滤后的总页数，会出现无数据的情况，需要在filterStatus方法中重置分页：

public function filterStatus($s = null){
    $this->s = $s;
    $this->resetPage(); // 重置到第一页
}

4. 统计数据与实际数据不符 #

当前的allStatus、aktif、nonAktif是全表统计，没有考虑搜索条件，导致统计数和表格展示的数量不一致，需要修改统计逻辑：

public function render()
{
    // 先构建基础查询，包含搜索条件
    $baseQuery = Retail::when($this->searchTerm, function($query){
        return $query->where(function($q){
            $q->where('id_retail', 'LIKE', '%'.$this->searchTerm.'%')
              ->orWhere('name', 'LIKE', '%'.$this->searchTerm.'%');
        });
    });

    $allStatus = $baseQuery->count();
    $aktif = $baseQuery->where('status', 1)->count();
    $nonAktif = $baseQuery->where('status', 2)->count();
    $retails = $this->dataList();

    return view('livewire.retails.show', compact('retails','allStatus','aktif','nonAktif'));
}

修改后的完整代码 #

App/Http/Livewire/Retails/Show.php #

<?php
namespace App\Http\Livewire\Retails;

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

class Show extends Component
{
    // Datatable 
    use WithPagination;
    public $sortColumnName = 'created_at', $sortDirection = 'desc', $searchTerm = null, $showData = 5, $selectedRows = [], $selectedPageRows = false, $s = null;
    protected $paginationTheme = 'bootstrap';
    protected $queryString = [
        'searchTerm' => ['except' => ''],
        's' => ['except' => null]
    ];

    public function render()
    {
        $baseQuery = Retail::when($this->searchTerm, function($query){
            return $query->where(function($q){
                $q->where('id_retail', 'LIKE', '%'.$this->searchTerm.'%')
                  ->orWhere('name', 'LIKE', '%'.$this->searchTerm.'%');
            });
        });

        $allStatus = $baseQuery->count();
        $aktif = $baseQuery->where('status', 1)->count();
        $nonAktif = $baseQuery->where('status', 2)->count();
        $retails = $this->dataList();
        
        return view('livewire.retails.show', compact('retails','allStatus','aktif','nonAktif'));
    }

    public function filterStatus($s = null){
        $this->s = $s;
        $this->resetPage();
    }

    public function dataList(){
        return Retail::when($this->s, function($query, $s){
             return $query->where('status', $s);
        })
        ->when($this->searchTerm, function($query){
            return $query->where(function($q){
                $q->where('id_retail', 'LIKE', '%'.$this->searchTerm.'%')
                  ->orWhere('name', 'LIKE', '%'.$this->searchTerm.'%');
            });
        })
        ->orderBy($this->sortColumnName, $this->sortDirection)
        ->paginate($this->showData);
    }

    // 其他方法（sortBy、switchStatus等）保持不变
}

完成以上修改后，点击「激活」「非激活」按钮就能正确过滤数据，同时解决了状态丢失、分页异常、统计数不符的问题。

内容的提问来源于stack exchange，提问作者Mas Raff