Individual column search "No results found"

[zagoli]

:beetle: bug report

When I apply the search function to a particular column, the rendered table says "No matching records found" even if there is data in the column corresponding to the search. If I do search("") all data is displayed.

:microscope: Minimal Reproduction

HTML table

<select (change)="filterTable($event)">
    <option selected>All Categories</option>
    <option *ngFor="let category of categories">{{category}}</option>
</select>
<table datatable [dtOptions]="dtOptions" class="table table-bordered table-hover" style="width:100%"></table>

Component class

this.dtOptions = {
            ajax: (dataTablesParameters: any, callback) => {
                this.apollo.query({
                    query: gql`
                        query Films {
                            films {
                                title
                                release_year
                                rating
                                categories
                                language
                                rental_rate
                            }
                        }
                    `,
                }).subscribe((result: any) => {
                    this.disableFiltering = false;
                    callback({
                        data: result.data.films,
                    })
                })
            },
            columns: [
                {title: 'Title', data: 'title'},
                {title: 'Year', data: 'release_year', searchable: false},
                {title: 'Rating', data: 'rating', searchable: false},
                {title: 'Categories', data: 'categories[, ]', searchable: false},
                {title: 'Language', data: 'language', searchable: false},
                {title: 'Rental Cost', data: 'rental_rate', searchable: false},
            ]
        }
    }

    filterTable(event: Event) {
        let selectedCategory = (event.target as HTMLSelectElement).value;
        this.datatableElement.dtInstance.then( (dtInstance: DataTables.Api) => {
            dtInstance.column(3)
                .search(selectedCategory == 'All Categories' ? '' : selectedCategory)
                .draw();
        })
    }

I checked the categories are correctly initialized.

:8ball: Expected behavior

I expect the table to apply the column search correctly.

:camera: Screenshots

When searching:

:globe_with_meridians: Your Environment

• NodeJS version: 18.15.0
• Angular version: 15.0.0
• Angular CLI version: 15.0.0
• jQuery version: 3.6.0
• DataTables version: 1.13.4
• angular-datatables version: 15.0.1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been closed due to inactivity. Please feel free to re-open the issue to add new inputs.