如何让AJAX DataTable仅显示精确匹配搜索结果，初始不展示全量数据？

现有实现代码 #

前端DataTables初始化代码 #

var table = $('#customer-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ route('api.users') }}",
    columns: [
        {data: 'id', name: 'id'},
        {data: 'name', name: 'name'},
        {data: 'title', name: 'title'},
        {data: 'date', name: 'date'},   
    ]
});

Laravel路由 #

Route::get('/apiUsers','UserController@apiUsers')->name('api.users');

控制器方法 #

public function apiUsers()
{
    $customer = Customer::all();

    return Datatables::of($customer)
        ->addColumn('action', function($customer){
            return'<a onclick="editForm('. $customer->id .')" class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-edit"></i> Edit </a> ' .
                '<a onclick="deleteData('. $customer->id .')" class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-trash"></i> Delete </a>';
        })
        ->rawColumns(['action'])->make(true);
}

依赖脚本 #

<script src="{{ asset('assets/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>

需求 #

初始状态下不展示任何数据，仅当使用搜索功能时，显示与搜索内容精确匹配的结果。

修改方案 #

1. 后端控制器修改（核心逻辑） #

通过判断DataTables传递的搜索参数，控制返回数据集：无搜索值时返回空集合，有搜索值时执行精确匹配查询。

public function apiUsers()
{
    $searchValue = request()->input('search.value');
    
    // 无搜索值时返回空集合
    if(empty($searchValue)){
        return Datatables::of(collect())
            ->addColumn('action', function(){
                return '';
            })
            ->rawColumns(['action'])->make(true);
    }
    
    // 有搜索值时执行精确匹配，可按需调整匹配字段（示例匹配name、title）
    $customers = Customer::where(function($query) use ($searchValue){
        $query->where('name', '=', $searchValue)
              ->orWhere('title', '=', $searchValue);
    })->get();
    
    return Datatables::of($customers)
        ->addColumn('action', function($customer){
            return'<a onclick="editForm('. $customer->id .')" class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-edit"></i> Edit </a> ' .
                '<a onclick="deleteData('. $customer->id .')" class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-trash"></i> Delete </a>';
        })
        ->rawColumns(['action'])->make(true);
}

2. 前端优化（可选） #

添加友好提示与交互优化，提升用户体验：

var table = $('#customer-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ route('api.users') }}",
    columns: [
        {data: 'id', name: 'id'},
        {data: 'name', name: 'name'},
        {data: 'title', name: 'title'},
        {data: 'date', name: 'date'},   
    ],
    // 初始无数据时的提示文字
    language: {
        emptyTable: "请输入搜索内容查询精确匹配结果"
    },
    // 初始化后自动聚焦搜索框
    initComplete: function(){
        $('.dataTables_filter input').focus();
    }
});

说明 #

• 后端通过request()->input('search.value')获取搜索框输入值，为空时返回空集合，确保初始无数据展示；
• 精确匹配通过where('字段名', '=', $searchValue)实现，可根据业务需求调整匹配的字段范围；
• 前端优化项为可选操作，用于引导用户操作、提升交互流畅度。

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