Laravel8中如何用Ajax+jQuery实现Blade表格动态排序

以下代码直接替换对应位置即可解决全部问题：

问题根因说明 #

• 参数不触发、变量未定义：前后端传参key不匹配，前端传的是val/desc，后端判断的是order_by；另外原控制器里的->latest()会默认按created_at倒序，覆盖自定义的id排序规则，排序逻辑本身不生效。
• 字段显示Undefined：原JS写错了jQuery的Ajax参数名（jsonType应为dataType），且清空数据时把表头行一起删掉，遍历数据时未正确取到分页下的用户列表项，字段匹配错误。
• 首屏为空：原逻辑没有页面加载时的初始渲染触发，且全删表格行的逻辑会破坏原有Blade渲染的首屏内容。

1. 控制器代码替换 #

首先在控制器顶部引入Illuminate\Http\Request，将index方法替换为以下代码，同时兼容首屏渲染和Ajax请求：

public function index(Request $request)
{
    // 默认排序为升序，和下拉框默认选项一致，加白名单防非法参数
    $sort = $request->input('sort', 'asc');
    if (!in_array($sort, ['asc', 'desc'])) {
        $sort = 'asc';
    }

    // 去掉冲突的latest()方法，直接按id排序
    $users = User::orderBy('id', $sort)->paginate(20);

    // Ajax请求直接返回JSON格式的用户列表
    if ($request->ajax()) {
        return response()->json([
            'users' => $users->items()
        ]);
    }

    // 普通页面访问返回Blade视图，带默认数据
    return view('admin.users.all', compact('users', 'sort'));
}

2. Blade模板代码替换 #

将原有表格和下拉框部分替换为以下代码，区分表头和数据容器，避免误删表头：

<!-- 排序下拉框 -->
<select class="form-control select2" id="dropdown-list">
    <option value="asc" @selected($sort == 'asc')>Ascending（升序）</option>
    <option value="desc" @selected($sort == 'desc')>Descending（降序）</option>
</select>

<!-- 用户数据表格 -->
<table class="table table-hover" id="contentDiv">
    <thead>
        <tr>
            <th>ID</th>
            <th>Username</th>
            <th>Email</th>
            <th>User Status</th>
        </tr>
    </thead>
    {{-- 数据行单独放容器，后续替换只操作这部分 --}}
    <tbody id="userTableBody">
        @foreach($users as $user)
        <tr>
            <td>{{ $user->id }}</td>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
            <td>{{ $user->status }}</td>
        </tr>
        @endforeach
    </tbody>
</table>

注：Laravel 8+ 可以直接用@selected指令做选项选中判断，不需要写长串的三元表达式。

3. 前端JS代码替换 #

将原有Ajax逻辑替换为以下代码，抽离公共渲染方法，首屏自动加载数据：

// 表格渲染公共方法
function renderUserTable(sortType) {
    $.ajax({
        url: baseurl + '/admin/users',
        type: 'GET',
        data: { sort: sortType },
        dataType: 'json', // 修正原代码写错的jsonType参数
        success: function (response) {
            const $tableBody = $('#userTableBody');
            // 只清空数据行，保留表头
            $tableBody.empty();

            // 遍历数据拼接表格行
            response.users.forEach(user => {
                $tableBody.append(`
                    <tr>
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td>${user.email}</td>
                        <td>${user.status}</td>
                    </tr>
                `);
            });
        }
    });
}

// 页面加载完成后初始化
$(function() {
    // 首屏默认渲染
    renderUserTable($('#dropdown-list').val());

    // 监听下拉框切换，重新渲染
    $('#dropdown-list').on('change', function() {
        renderUserTable($(this).val());
    });
});

修复点对应说明 #

• 统一前后端参数名为sort，参数判断不触发、变量未定义问题直接解决，去掉了多余的双分支Ajax判断，逻辑更简洁。
• 修正Ajax参数名、后端返回纯用户列表数据、前端字段名和数据库字段一一对应，不会再出现Undefined的字段错误。
• 页面DOM加载完成后自动触发一次渲染，首屏直接展示默认排序的数据，不需要手动操作下拉框。

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