Laravel8中JS传选中部门ID至控制器后Datatables无数据问题

现有代码存在4个直接导致问题的错误：

• 重复请求接口：下拉change事件中手动发起一次AJAX请求，初始化Datatables开启serverSide模式后又自动发起第二次请求，第二次请求未携带部门ID参数，返回空数据
• 初始化逻辑错误：每次下拉切换都重复初始化Datatables实例，没有销毁旧实例也没有动态传递部门参数
• 前后端配置不匹配：控制器注释了addIndexColumn()，前端列配置却使用DT_RowIndex渲染序号，会触发列渲染错误
• 拼写错误：AJAX配置中chache为错误拼写，正确参数名为cache

修复步骤 #

1. 视图层补充配置 #

首先确认页面头部引入CSRF标签，提前写好模态框和表格结构，不要通过JS动态生成表格：

<!-- 页面头部加入CSRF标签 -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- 原有部门下拉代码保留 -->
<div class="form-group row">
    <label for="divisi" class="col-sm-2 col-form-label">Pilih Divisi</label>
    <select class="col-sm-5 form-control custom-select" name="divisi" id="divisi">
        <option selected>-- Pilih --</option>
        @foreach ($divisi as $key => $item)
            <option value="{{ $key }}">{{ $item }}</option>
        @endforeach
    </select>
</div>

<!-- 模态框结构 -->
<div class="modal fade" id="produkModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Daftar Barang</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-produk" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Kode</th>
                            <th>Nama</th>
                            <th>Harga Jual</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

2. JS逻辑重写 #

页面加载完成后只初始化一次Datatables，下拉切换时仅重载表格数据并传递最新部门ID，不要重复初始化表格：

let tableProduk;
$(document).ready(function() {
    // 页面加载时初始化表格，不要放在change事件内部
    tableProduk = $('.table-produk').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        retrieve: true,
        autoWidth: false,
        ajax: {
            url: "{{ route('penjualand.getBarang') }}",
            type: "GET",
            data: function(d) {
                // 动态传递当前选中的部门ID
                d.id_divisi = $('#divisi').val();
            }
        },
        columns: [
            {data: 'DT_RowIndex', searchable: false, sortable: false},
            {data: 'kode'},
            {data: 'nama'},
            {data: 'hargaJual'},
        ]
    });

    // 下拉选中切换事件
    $('#divisi').change(function() {
        const selectedDivId = $(this).val();
        // 过滤默认提示选项
        if(selectedDivId === '-- Pilih --') return;
        // 弹出模态框
        $('#produkModal').modal('show');
        // 重载表格数据，自动携带最新部门ID
        tableProduk.ajax.reload();
    });

    // 解决模态框弹出后表格宽度异常问题
    $('#produkModal').on('shown.bs.modal', function() {
        tableProduk.columns.adjust();
    });
});

3. 控制器代码调整 #

放开序号列配置，增加参数判空避免报错：

public function getBarang(Request $request)
{
    $selectedDiv = $request->input('id_divisi');
    // 未传部门ID时返回空数据，避免查询报错
    if(!$selectedDiv) {
        return datatables()->of([])->make(true);
    }
    $barang = DB::table('barang')->where('divisi_id', $selectedDiv)->get();

    return datatables()
        ->of($barang)
        ->addIndexColumn() // 放开该行，匹配前端DT_RowIndex序号列
        ->rawColumns([])
        ->make(true);
}

排查验证点 #

• 打开浏览器F12控制台，切换下拉时查看getBarang接口请求参数是否携带正确的id_divisi
• 确认路由penjualand.getBarang为GET类型，无权限拦截
• 若接口返回500错误，查看Laravel日志排查数据库字段是否匹配

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