如何在Laravel 8中用Ajax & jQuery重新生成排序后的用户表格

先梳理下现有代码里的核心问题，再一步步修正：

1. 修复控制器逻辑（关键错误） #

当前控制器直接返回JSON导致初始页面渲染时$users变量不存在，会报错；另外->latest()会覆盖你之前的orderBy('id')逻辑（latest()默认按created_at降序排序），等于白写了ID排序规则。

修正后的控制器：

public function index()
{
    $users = User::query();

    // 根据请求参数排序，移除latest()避免覆盖规则
    if(request('desc') == 1){
        $users->orderBy('id','DESC');
    }else{
        $users->orderBy('id','ASC');
    }

    $users = $users->paginate(20);

    // 区分Ajax请求和普通请求，返回对应格式
    if(request()->ajax()){
        return response()->json([
            'users' => $users
        ]);
    }

    // 非Ajax请求返回视图，保证初始页面正常渲染
    return view('admin.users.all', compact('users'));
}

2. 修正Blade表格结构 #

把表头从<tbody>移到<thead>，避免清空数据时删掉表头；同时给tbody单独加ID，操作更精准：

<table class="table table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Username</th>
            <th>Email</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="user-table-body">
        @if($users->count() != 0)
            @foreach($users as $user)
            <tr>
                <td>{{ $user->id }}</td>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
                <td>{{ $user->status }}</td>
            </tr>
            @endforeach
        @else
            <tr>
                <td colspan="4" class="text-center">Nothing to show</td>   
            </tr>
        @endif  
    </tbody>
</table>

3. 简化并修复Ajax代码 #

去掉重复的baseurl定义，修正jsonType拼写错误（应为dataType），修复模板字符串的语法错误，合并重复的Ajax逻辑：

@push('scripts')
    // 简化baseurl获取
    var baseurl = "{{ URL::to('/') }}";

    $("#dropdown-list").on('change', function(){
        var val = $(this).val();
        var url = baseurl + '/admin/users';
        
        // 根据选择拼接排序参数
        if(val === "desc"){
            url += '?desc=1';
        }

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            success: function (response) {
                var $tbody = $('#user-table-body');
                $tbody.empty(); // 清空现有数据行

                if(response.users.data.length === 0){
                    // 空数据时显示提示
                    $tbody.append(`
                        <tr>
                            <td colspan="4" class="text-center">Nothing to show</td>   
                        </tr>
                    `);
                    return;
                }

                // 遍历分页数据填充表格（Laravel分页JSON的data字段才是用户列表）
                response.users.data.forEach(function(user){
                    $tbody.append(`
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.email}</td>
                            <td>${user.status}</td>
                        </tr>
                    `);
                });
            },
            error: function(xhr){
                // 增加错误处理方便调试
                console.log('请求出错:', xhr.responseText);
            }
        });
    });
@endpush

4. 验证细节 #

• 确保页面已引入jQuery，否则Ajax代码无法运行
• 下拉框的id="dropdown-list"要和Ajax选择器一致

修改后，初始页面能正常渲染用户列表，切换下拉框时会通过Ajax获取排序后的分页数据并正确填充表格，空数据场景也会显示对应提示。

内容的提问来源于stack exchange，提问作者Pouya Vaghefi