Laravel中Datatable.js的JSON列无法排序问题求助

问题背景 #

在Laravel中使用yajra/laravel-datatables-oracle操作MySQL数据库，搭配mcamara/laravel-localization实现多语言。Datatable表格的数据展示、搜索功能正常，但存储为JSON格式的free_videos.title和categories.title列无法正常排序——点击列头排序箭头后，箭头状态变化，但数据未按预期排序。

解决方案 #

1. 后端查询逻辑修改 #

核心是在查询时直接提取JSON字段中当前语言的文本，作为排序依据，而非直接使用整个JSON字符串排序：

public function active(Request $request)
{
    $currentLang = app()->getLocale(); // 获取当前语言

    $query = FreeVideo::query()
        ->leftJoin('categories', 'free_videos.category_id', '=', 'categories.id')
        ->select(
            'free_videos.id',
            'free_videos.title',
            'categories.id as category_id',
            'categories.title as category',
            // 提取当前语言的标题，用于排序
            \DB::raw("free_videos.title->>'$.$currentLang' as title_sort"),
            \DB::raw("categories.title->>'$.$currentLang' as category_sort")
        );

    return DataTables::eloquent($query)
        ->addColumn('freeVideoTitle', function($row) use ($currentLang){
            return $row->title[$currentLang] ?? ''; // 直接取JSON字段的当前语言值
        })
        ->editColumn('freeVideoCategory', function($row) use ($currentLang){
            return $row->category[$currentLang] ?? '';
        })
        ->editColumn('languages', function($row){
            return $row->getTranslations('title');
        })
        ->addColumn('actions', function($row) use ($request){
            $actions['edit'] = ['status' => 1, 'route' => route('backend.freeVideos.edit', $row->id)];
            $actions['destroy'] = ['status' => 1, 'route' => route('backend.freeVideos.destroy', $row->id)];
            return $actions;
        })
        // 为指定列绑定排序逻辑
        ->orderColumn('freeVideoTitle', function($query, $order) use ($currentLang) {
            $query->orderBy(\DB::raw("free_videos.title->>'$.$currentLang'"), $order);
        })
        ->orderColumn('freeVideoCategory', function($query, $order) use ($currentLang) {
            $query->orderBy(\DB::raw("categories.title->>'$.$currentLang'"), $order);
        })
        ->make(true);
}

2. 前端Datatables配置调整 #

更新列的name属性，使其对应后端提取的排序字段，同时禁用不需要排序的列：

table.DataTable({
    language: {url: '/assets/common/js/locales/datatable/fr.json'},
    dom:
        "<'row'" +
        "<'col-sm-6 d-flex align-items-center justify-content-start'l>" +
        "<'col-sm-6 d-flex align-items-center justify-content-end'f>" +
        ">" +

        "<'table-responsive'tr>" +

        "<'row'" +
        "<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
        "<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
        ">",
    responsive: true,
    searchDelay: 500,
    processing: true,
    serverSide: true,
    pageLength: 50,
    ajax: ajaxProcessing,
    columns: [
        {
            data: 'freeVideoTitle',
            name: 'title_sort'
        },
        {
            data: 'freeVideoCategory',
            name: 'category_sort'
        },
        {
            data: 'languages',
            name: 'langs',
            orderable: false
        },
        {
            data: 'actions',
            responsivePriority: -1,
            orderable: false
        },
    ],
    order: [[0, 'desc']]
});

原理说明 #

• 原问题原因：默认排序是基于整个JSON字符串的字符顺序，而非JSON内当前语言的文本内容，导致排序结果不符合预期。
• 解决核心：通过MySQL的->>操作符提取JSON字段中当前语言的文本，将其作为单独的排序字段，让Datatables基于该字段执行排序逻辑。

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