Filter datatable by custom filters in laravel10

Question

i am trying to filter the datatable using custom filters, lets say i want to filter using "title" column: in my controller endpoint i did this:

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);
    }
}

and in js script i did this:

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


    $("#apply-filters").click(function () {
       console.log($("#title").val()); // this will log the title in the console correctly
       table.draw();
    });

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

and here i notice somthing, which is that the title is not sent via request, but if i did this

        ajax: {
            url: route,
            data: {
                title: "test title"
            }
        },

then its work.

So is there any suggestions or solutions, because i tried many ways and nothing worked for me.

Answer 1

this is example of mine. i put my search function on top, just like what Mr. Marius said in your comment.

$(document).ready(function () {
    // Setup - add a text input to each footer cell
    $('#title').each(function () {
        var title = $(this).text();
        $(this).html('<input style="width:100%;" type="text" placeholder="Search ' + title + '" />');
    });
    // DataTable
    var table = $('#example1').DataTable({
        fixedColumns:   {
            right: 1
        },
        initComplete: function () {
            // Apply the search
            this.api()
                .columns()
                .every(function () {
                    var that = this;
 
                    $('input', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
        },
    });
});