如何使用jQuery ajax刷新表内容

Question

我想要一个基本表，当用户从下拉列表中选择不同的公司时，它可以动态更改内容。该表将仅通过AJAX加载选定公司的数据。该表还将应用一些过滤器，如部门名称过滤器，我希望仍然保留该功能以及使用Laravel内置链接的分页链接。这是我的一些代码片段。

HTML表

<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-black uppercase tracking-wider">
No.
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-black uppercase tracking-wider">
Form Enquiry Name
</th>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@forelse ($data as $item)
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">{{ $data->firstItem() + $loop->index }}.</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="text-sm font-medium text-gray-900">
ID #{{ $item->id }}
</div>
</div>
<span class="inline-flex text-xs leading-5 font-semibold rounded-full text-gray-500">
{{ $item->name }}                                                            
</span>
</td>
</tr>
</tbody>

控制器

public function index(Request $request)
{
$company= $request->Company;
$data = FormEnquiry::orderByDesc('created_at')
->where('name', 'LIKE', "%{$company}%")
->where('created_by', Auth::user()->id)
->simplePaginate(5);
return view('form.form-enquiry.index', ['data'=>$data, 'formName'=>$request->formName, 'deptId'=>$request->deptId, 'company'=>$company]);
}

我可以知道当公司下拉列表选择不同时，使表动态加载数据的最佳方法是什么吗？我该如何确保分页不会中断(如果有的话(，并且仍然能够进行搜索功能筛选。

Answer 1

将您的表和分页移动到单独的文件(包括分页(，如views/partials/table.blade.php。然后在控制器中进行ajax调用的方法创建一个实际的HTML并将其返回到ajax:

$html = view('partials.table', compact('data'))->render();
return response()->json(['html' => $html]);

最后一步是用AJAX成功回调中得到的响应数据替换当前的HTML。