服务端Yajra DataTable中SearchPanes选项为空问题求助

在Yajra DataTable服务端模式下使用SearchPanes功能时，SearchPanes的选项为空，无法正常工作。以下是当前的实现代码：

后端PHP代码 #

public function getSalesReturnsData()
{
    $sales = Sale::query()
        ->select(DB::raw("Bestelldatum, kLieferscheinPos ,cBestellNr,
            Verkaufsplattform, SKU, GTIN, HAN, Hersteller, Lieferant, cName, 
            Menge, VKPreis, UVP, Farbe, Groesse, Warengruppe, Transaktion, 
            Anmerkung, Lieferland, Versandart, Zahlungsart, VersandkostenBrutto, 
             GutscheinBestellungBrutto"))
        ->where('Bestelldatum', '>', now()->subDays(30)->endOfDay());

    $returns = ProductReturn::query()
        ->select(DB::raw("Retourendatum, kRMRetoure,cBestellNr, Verkaufsplattform, 
            SKU, GTIN, HAN, Hersteller, Lieferant, cName, Menge, VKPreis, UVP, Farbe,
            Groesse, Warengruppe, Transaktion, Anmerkung, Lieferland, Versandart, 
            Zahlungsart, VersandkostenBrutto, GutscheinBestellungBrutto"));

    $results = $sales->unionAll($returns);

    return DataTables::of($results)
        ->addColumn('Bestelldatum', function ($row) {
            $bestelldatum = date("d.m.Y", strtotime($row->Bestelldatum));
            return $bestelldatum;
        })->make(true);
}

前端JavaScript代码 #

$(document).ready(function () {
    load_data();

    function load_data() {
        $('#datatable').DataTable({
            processing: true,
            serverSide: false,
            ajax: {
                url: "{{ route('getSalesReturnsData') }}"
            },
            "columns": [{
                "data": "Bestelldatum"
            },
                {
                    "data": "kLieferscheinPos"
                },
                {
                    "data": "cBestellNr"
                },
                {
                    "data": "Verkaufsplattform"
                },
                {
                    "data": "SKU"
                },
                {
                    "data": "GTIN"
                },
                {
                    "data": "HAN"
                },
                {
                    "data": "Hersteller"
                },
                {
                    "data": "Lieferant"
                },
                {
                    "data": "cName"
                },
                {
                    "data": "Menge"
                },
                {
                    "data": "VKPreis"
                },
                {
                    "data": "UVP"
                },
                {
                    "data": "Farbe"
                },
                {
                    "data": "Groesse"
                },
                {
                    "data": "Warengruppe"
                },
                {
                    "data": "Transaktion"
                },
                {
                    "data": "Anmerkung"
                },
                {
                    "data": "Lieferland"
                },
                {
                    "data": "Versandart"
                },
                {
                    "data": "Zahlungsart"
                },
                {
                    "data": "VersandkostenBrutto"
                },
                {
                    "data": "GutscheinBestellungBrutto"
                },
            ],
            dom: 'PBfrtip',
            stateSave: true,
            searchPanes: {
                initCollapsed: true,
                cascadePanes: true,
                dtOpts: {
                    paging: 'flase',
                    pagingType: 'simple',
                    select: {
                        style: 'multi'
                    }
                },
                columns: [3, 5, 8, 6, 7, 9, 11, 16]
            }
        });
    }
});

核心问题点 #

• Union查询字段不匹配：Sale表查询的是Bestelldatum，但ProductReturn表查询的是Retourendatum，导致返回数据集的日期字段名混乱，SearchPanes无法正确识别字段值。
• 服务端模式未启用：前端设置serverSide: false，但实际需要服务端模式，必须改为true；同时后端未配置SearchPanes的服务端支持。
• 拼写错误：前端searchPanes.dtOpts.paging写成了'flase'，应为false。
• 后端未开启SearchPanes支持：Yajra DataTable需要显式调用->searchPanes()方法来启用服务端的SearchPanes处理逻辑。

修改步骤 #

1. 修复后端Union查询的字段一致性

将ProductReturn的Retourendatum别名改为Bestelldatum，kRMRetoure别名改为kLieferscheinPos，保证两个查询的字段名完全一致：

$returns = ProductReturn::query()
    ->select(DB::raw("Retourendatum AS Bestelldatum, kRMRetoure AS kLieferscheinPos, cBestellNr, Verkaufsplattform, 
        SKU, GTIN, HAN, Hersteller, Lieferant, cName, Menge, VKPreis, UVP, Farbe,
        Groesse, Warengruppe, Transaktion, Anmerkung, Lieferland, Versandart, 
        Zahlungsart, VersandkostenBrutto, GutscheinBestellungBrutto"));

2. 后端启用SearchPanes服务端支持

在DataTable实例中添加->searchPanes()方法，指定需要生成选项的字段：

return DataTables::of($results)
    ->addColumn('Bestelldatum', function ($row) {
        $bestelldatum = date("d.m.Y", strtotime($row->Bestelldatum));
        return $bestelldatum;
    })
    // 启用SearchPanes服务端处理，指定需要生成选项的字段
    ->searchPanes([
        'columns' => ['Verkaufsplattform', 'GTIN', 'Lieferant', 'HAN', 'Hersteller', 'cName', 'VKPreis', 'Transaktion']
    ])
    ->make(true);

3. 前端修正配置

• 将serverSide改为true
• 修复paging拼写错误
• 确保searchPanes.columns对应正确的列索引：

$('#datatable').DataTable({
    processing: true,
    serverSide: true, // 修正为服务端模式
    ajax: {
        url: "{{ route('getSalesReturnsData') }}"
    },
    "columns": [
        // ... 保持原有列配置不变
    ],
    dom: 'PBfrtip',
    stateSave: true,
    searchPanes: {
        initCollapsed: true,
        cascadePanes: true,
        dtOpts: {
            paging: false, // 修正拼写错误
            pagingType: 'simple',
            select: {
                style: 'multi'
            }
        },
        columns: [3, 5, 8, 6, 7, 9, 11, 16] // 确保索引对应正确字段
    }
});

额外注意事项

• 确保已引入SearchPanes的CSS和JS文件（本地资源或CDN）
• 检查数据库中对应字段是否有非空数据，空数据会导致SearchPanes选项为空
• 对于数值型字段（如VKPreis），可在后端searchPanes配置中添加options回调格式化数值，保证选项显示正确

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