Laravel 10中DataTables自定义过滤失效问题求助

在Laravel 10中为DataTables实现title列的自定义过滤功能，后端已编写对应逻辑，但前端通过ajaxFilter函数动态传递title参数时，请求中未携带该参数；若直接在ajax的data中写固定title值则可正常生效。

后端控制器原代码 #

public function getDatatableIndex(Request $request)
{
    if ($request->ajax()) {
        $model= Post::query();

        if ($request['title'] ?? false) {
            $model->where('title', 'LIKE', "%{$request['title']}%");
        }


        $data = PostResource::collection($model->get())->resolve();
        $dataTable = DataTables::of($data)
            ->addColumn('#', function ($row) {
                static $order = 0;
                return ++$order;
            });


        $dataTable->addColumn('actions', function ($row) {
            $data['id'] = $row['id'];
            $data['actions'] = $this->table_data['actions'];
            return view('dashboard.post.parts.actions', $data)->render();
        })
            ->rawColumns(['#', 'actions'])
            ->escapeColumns(['*']);

        return $dataTable->make(true);
    }
}

前端JS原代码 #

var table = $("#kt_datatable_example_1").DataTable({
    processing: true,
    searching: false,
    serverSide: true,
    ajax: {
        url: route,
        data: ajaxFilter
    },
    columns: columns 
});


$("#apply-filters").click(function () {
   console.log($("#title").val()); // 此处能正确打印title值
   table.draw();
});

var ajaxFilter = function (d) {
    d.title = $("#title").val();
};

解决方案 #

1. 前端核心修复：调整函数定义顺序 #

原代码中ajaxFilter函数在DataTable初始化之后才定义，导致初始化时data属性无法识别该函数，参数自然无法传递。需将ajaxFilter的定义移到DataTable初始化之前：

// 先定义过滤参数处理函数
var ajaxFilter = function (d) {
    d.title = $("#title").val();
};

// 再初始化DataTable
var table = $("#kt_datatable_example_1").DataTable({
    processing: true,
    searching: false,
    serverSide: true,
    ajax: {
        url: route,
        data: ajaxFilter
    },
    columns: columns 
});

$("#apply-filters").click(function () {
   table.draw(); // 触发表格重绘，传递最新过滤参数
});

2. 后端优化（可选但推荐） #

• 改用$request->get('title')更规范的参数获取方式
• 直接将查询构造器传给DataTables::of()，而非先执行get()，这样能利用DataTables的serverSide分页、排序功能，避免一次性查询全量数据：

public function getDatatableIndex(Request $request)
{
    if ($request->ajax()) {
        $query = Post::query();

        if ($title = $request->get('title')) {
            $query->where('title', 'LIKE', "%{$title}%");
        }

        // 直接传递查询构造器，让DataTables处理分页等逻辑
        return DataTables::of($query)
            ->addColumn('#', function ($row) {
                static $order = 0;
                return ++$order;
            })
            ->addColumn('actions', function ($row) {
                $data['id'] = $row->id;
                $data['actions'] = $this->table_data['actions'];
                return view('dashboard.post.parts.actions', $data)->render();
            })
            ->rawColumns(['#', 'actions'])
            ->escapeColumns(['*'])
            ->make(true);
    }
}

验证说明 #

修改后点击apply-filters按钮，表格会触发重绘，ajaxFilter函数会自动将当前输入框的title值附加到请求参数中，后端即可接收参数并执行过滤逻辑。

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