如何使用 Ajax 和 jQuery 重新生成表格内容

Answer 1

首先，您的 html 应如下所示：

<tbody>
    @foreach($users as $user)
        <tr>
            <td>{{ $user->id }}</td>
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
            <td>{{ $user->status }}</td>
        </tr>
    @endforeach
</tbody>

然后，您将需要在 ajax 成功中清空表体，例如：

$('#contentDiv').find('tbody').html('');

然后你必须遍历响应数组

response.users.forEach(refill_table);
function refill_table(item, index){
    $('#contentDiv').find('tbody').append(`
        <tr>
            <td>${item['id']}</td>
            <td>${item['name']}</td>
            <td>${item['email]}</td>
            <td>${item['status']}</td>
        </tr>
    `);
}

当涉及到您的控制器时，您应该发送 json 响应，例如：

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

        if(request('desc') == 1){
            $users = $users->orderBy('id','DESC')->paginate(20);
        }else{
            $users = $users->orderBy('id','ASC')->paginate(20);
        }

        return response()->json([
            'users' => $users
        ]);
    }