Custom filter columns[0][search][value] remains empty

Wotuu

Hello all,

I searched far and wide and found someone with the same problem as I had, but not with a solution:

https://datatables.net/forums/discussion/38460/column-search-value-not-in-ajax-request

My problem is that I made a custom filtering option for my DataTable which triggers the datatable.column(0).search(val) code, but in my ajax request the value is never set.

My data table:

            _dt = $('#routes_table').DataTable({
                'processing': true,
                'serverSide': true,
                'responsive': true,
                'ajax': {
                    'url': '{{ route('api.dungeonroutes') }}',
                    'data': function (d) {
                        // Prevent this variable from busting cache
                        d.draw = null;
                    }, <?php // Enable caching when in production mode, disable it when developing ?>
                    'cache': '{{ env('APP_DEBUG', true) ? 'false' : 'true' }}'
                },
                'lengthMenu': [25],
                'bLengthChange': false,
                'bFilter': false,
                'columns': [
                    {
                        'data': 'title',
                        'name': 'title',
                        'render': function (data, type, row, meta) {
                            <?php // @todo Use laravel route for this link ?>
                                return '<a href="/dungeonroute/view/' + row.id + '" >' + data + '</a>';
                        }
                    },
                    {'data': 'dungeon.name'},
                    {
                        'data': 'affixes',
                        'render': function (data, type, row, meta) {
                            return handlebarsAffixGroupsParse(data);
                        },
                        'className': 'd-none d-md-table-cell',
                        'orderable': false
                    },
                    {
                        'data': 'setup',
                        'render': function (data, type, row, meta) {
                            return handlebarsGroupSetupParse(data);
                        },
                        'className': 'd-none d-lg-table-cell',
                        'orderable': false
                    },
                    {
                        'data': 'author.name',
                        'className': 'd-none d-md-table-cell'
                    },
                    {
                        'render': function (data, type, row, meta) {
                            return 'some rating';
                        }
                    }
                ]
            });

Custom search code:

            $("#dungeonroute_filter").bind('click', function(){
                _dt.column(0).search($("#dungeonroute_search_title").val()).draw();
            });

Html:

            <input id="dungeonroute_search_title" class="form-control" name="title" type="text">
            <button id="dungeonroute_filter" class="btn btn-info" type="button">Filter</button>

But no matter what I try, my request always looks like this:

columns[0][data]: title
columns[0][name]: title
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]:    // <---- always empty
columns[0][search][regex]: false

What am I doing wrong? Surely there must be something but I really cannot figure this one out. I'm using the latest NPM version of Datatables.