jQuery Ajax DataTable合并三字段为一列后搜索功能失效问题

你的问题核心原因是开启了服务端模式（serverSide: true）：DataTable的搜索请求会直接发给后端接口，后端只识别原始的type_name、brand_name、model_name字段，不知道你前端合并出来的product_name列，所以搜索时不会匹配这三个字段的内容。

下面是两种可行的解决办法：

方法一：修改后端搜索逻辑（推荐，适合大数据量） #

服务端模式下所有搜索、分页都由后端处理，你需要让后端把搜索关键词同时匹配type_name、brand_name、model_name三个字段。以Laravel为例，修改接口代码：

// 获取DataTable的搜索参数
$searchValue = request()->input('search.value');

// 构建基础查询
$query = \App\Models\Product::where('branch_id', request()->branch_id);

// 处理搜索逻辑
if (!empty($searchValue)) {
    $query->where(function($q) use ($searchValue) {
        $q->where('type_name', 'like', "%{$searchValue}%")
          ->orWhere('brand_name', 'like', "%{$searchValue}%")
          ->orWhere('model_name', 'like', "%{$searchValue}%");
    });
}

// 分页返回数据（可选：后端直接拼接合并字段返回给前端）
$products = $query->select('*', \DB::raw("CONCAT(type_name, ' ', brand_name, ' ', model_name) as product_fullname"))
    ->paginate(request()->input('length', 10));

return response()->json([
    'draw' => request()->input('draw'),
    'recordsTotal' => $products->total(),
    'recordsFiltered' => $products->total(),
    'data' => $products->items()
]);

前端代码可以保持原样，或者直接使用后端返回的合并字段：

var table = $('#all_product_table').DataTable({
    processing: true,
    serverSide: true,
    "order": [[0, "asc"]],                         
    ajax: {
        url: "{{ route('inspector.table_add_product') }}",
        type: "GET",
        data: {
            'branch_id': branch_id
        }
    },
    columns: [{
            data: 'DT_RowIndex',
            name: 'DT_RowIndex'
        },
        {
            data: 'product_fullname', // 直接用后端拼接好的字段
            name: 'product_fullname'
        },
        // 其他列配置...
    ]
});

方法二：关闭服务端模式（仅适合小数据量） #

如果你的数据量不大，可以把serverSide改成false，让DataTable在前端加载所有数据并完成搜索，这样就能直接搜到合并后的内容：

var table = $('#all_product_table').DataTable({
    processing: true,
    serverSide: false, // 关闭服务端模式
    "order": [[0, "asc"]],                         
    ajax: {
        url: "{{ route('inspector.table_add_product') }}",
        type: "GET",
        data: {
            'branch_id': branch_id
        }
    },
    columns: [{
            data: 'DT_RowIndex',
            name: 'DT_RowIndex'
        },
        {
            data: 'product_name',
            render: function(data, type, row) {
                return row.type_name + ' ' + row.brand_name + ' ' + row.model_name;
            }
        },
        // 其他列配置...
    ]
});

注意：这种方式会一次性加载所有数据，数据量大时会导致页面加载慢、卡顿，不推荐用于大数据场景。

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