如何通过jQuery AJAX实现下拉切换公司时动态刷新表格，并保留筛选与Laravel内置分页功能

我来帮你梳理一套可靠的实现思路，核心是通过AJAX异步请求传递筛选参数，配合Laravel的查询构建器和分页机制，确保筛选、分页功能都能正常工作，同时页面无需整体刷新。

一、前端调整：AJAX请求与动态更新 #

首先我们需要给筛选控件绑定事件，通过AJAX获取数据后替换表格内容和分页链接，同时处理动态生成的分页链接事件。

1. 完善HTML结构 #

给筛选控件添加标识ID，同时给分页单独做一个容器，方便后续替换：

<!-- 公司下拉框（添加ID） -->
<select id="company-select" name="Company">
    <!-- 你的公司选项 -->
    <option value="">所有公司</option>
    <option value="ABC" {{ $company == 'ABC' ? 'selected' : '' }}>ABC公司</option>
    <!-- 其他选项... -->
</select>

<!-- 部门筛选控件（示例为下拉框，根据你的实际情况调整） -->
<select id="dept-filter" name="deptId">
    <option value="">所有部门</option>
    <option value="1" {{ $deptId == 1 ? 'selected' : '' }}>技术部</option>
    <!-- 其他选项... -->
</select>

<!-- 表格部分 -->
<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>
        </tr>
    </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>
        @empty
        <tr>
            <td colspan="2" class="px-6 py-4 text-center text-gray-500">暂无匹配数据</td>
        </tr>
        @endforelse
    </tbody>
</table>

<!-- 分页容器（单独包裹，方便替换） -->
<div class="pagination-container mt-4">
    {{ $data->appends(request()->all())->links() }}
</div>

这里$data->appends(request()->all())是关键，它会把当前所有筛选参数（公司、部门等）附加到分页链接上，确保分页时不会丢失筛选条件。

2. 编写AJAX逻辑 #

用jQuery实现事件绑定和数据请求，注意动态分页链接的事件重新绑定：

$(document).ready(function() {
    // 绑定筛选控件的变更事件
    $('#company-select, #dept-filter').on('change', function() {
        loadTableData();
    });

    // 核心加载表格数据函数
    function loadTableData(pageUrl = null) {
        // 获取所有筛选参数
        const params = {
            Company: $('#company-select').val(),
            deptId: $('#dept-filter').val(),
            formName: $('input[name="formName"]').val() // 保留原有的formName筛选
        };

        // 构建请求URL：优先使用分页链接，否则用基础路由
        let url = pageUrl ?? '{{ route("form-enquiry.index") }}';
        
        // 把参数拼接到URL上
        if (!pageUrl) {
            url += '?' + new URLSearchParams(params).toString();
        } else {
            // 分页链接已经有page参数，直接追加其他筛选参数
            url += '&' + new URLSearchParams(params).toString();
        }

        // 发送AJAX请求
        $.ajax({
            url: url,
            type: 'GET',
            success: function(response) {
                // 替换表格tbody内容
                $('table tbody').html($(response).find('table tbody').html());
                // 替换分页容器内容
                $('.pagination-container').html($(response).find('.pagination-container').html());
                // 重新绑定分页链接的点击事件（因为是动态生成的）
                bindPaginationEvents();
            },
            error: function(xhr) {
                console.error('数据加载失败:', xhr.responseText);
            }
        });
    }

    // 绑定分页链接的点击事件
    function bindPaginationEvents() {
        $('.pagination a').on('click', function(e) {
            e.preventDefault();
            loadTableData($(this).attr('href'));
        });
    }

    // 初始化时绑定一次分页事件
    bindPaginationEvents();
});

二、后端控制器优化：安全处理筛选与分页 #

你的现有控制器需要做两个关键调整：一是防范SQL注入，二是确保所有筛选参数都被正确应用：

use Illuminate\Support\Facades\DB;

public function index(Request $request) {
    // 获取所有筛选参数
    $company = $request->input('Company');
    $deptId = $request->input('deptId');
    $formName = $request->input('formName');

    // 构建基础查询
    $query = FormEnquiry::orderByDesc('created_at')
        ->where('created_by', Auth::user()->id);

    // 公司筛选：用参数绑定避免SQL注入
    if ($company) {
        // 推荐写法1（Laravel 9+支持）
        $query->whereLike('name', $company);
        // 兼容低版本写法
        // $query->where('name', 'LIKE', DB::raw('?'), "%{$company}%");
    }

    // 部门筛选（假设你的模型有dept_id字段）
    if ($deptId) {
        $query->where('dept_id', $deptId);
    }

    // FormName筛选
    if ($formName) {
        $query->whereLike('form_name', $formName);
    }

    // 分页并附加所有请求参数
    $data = $query->simplePaginate(5)->appends($request->all());

    // 返回视图，传递所有筛选参数用于前端默认选中
    return view('form.form-enquiry.index', [
        'data' => $data,
        'formName' => $formName,
        'deptId' => $deptId,
        'company' => $company
    ]);
}

这里的whereLike是Laravel 9+新增的安全方法，自动处理模糊查询的通配符和参数绑定，避免SQL注入风险。如果是低版本Laravel，用DB::raw的参数绑定写法也可以。

三、关键注意事项 #

1. SQL注入防护：绝对不要直接把用户输入拼接到SQL语句中，一定要用Laravel查询构建器的参数绑定机制。
2. 筛选参数保留：分页时通过appends($request->all())把所有筛选参数带到分页链接里，确保分页后筛选条件不丢失。
3. 动态元素事件绑定：分页链接是AJAX动态生成的，每次更新后必须重新绑定点击事件，否则新的分页链接点击无效。
4. 空数据处理：表格里加上@empty分支，避免无数据时表格显示异常。

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