Error on Filtering data table on different entry

When I filter the data for a specific row, let’s say row 14, and my current view only shows 10 entries, it doesn’t display row 14. However, if I increase the number of entries per view to 25, then row 14 becomes visible. In that case, it seems like my current view or display settings are limiting the number of rows shown at a time.

Here are my view

function applyFilter() {
        var filterCategory = $('#filter_category').val();
        var filterContentType = $('#filter_content_type').val();

        $('#content tbody tr').hide();

        if (filterCategory != '' || filterContentType != '') {
            $('#content tbody tr').each(function () {
                var category = $(this).data('category');
                var contentType = $(this).data('content-type');

                if (
                    (filterCategory == '' || category == filterCategory) &&
                    (filterContentType == '' || contentType == filterContentType)
                ) {
                    $(this).show();
                }
            });
        } else {
            $('#content tbody tr').show();
        }

        $.ajax({
            url: 'e_learning/admin/content',
            type: 'POST',
            data: {
                category: filterCategory,
                content_type: filterContentType
            },
            success: function (response) {

                $('#content-list').html(response);
            },
            error: function (xhr, status, error) {
                console.error(error);
            }
        });
    }
 <div class="card-body bg-dark-transparent" id="form_collapse_list_0" style="">
        <div class="table-responsive bg-white p-2">
            <div id="table_forms_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="filter_category">Category:</label>
                            <div class="d-flex align-items-center">
                                <select class="form-control" id="filter_category">
                                    <option value="">All Categories</option>
                                    <?php foreach ($rsFilterCategory as $key => $row) {
                                        $selected = (!empty($filter_category) && $filter_category == $row['title']) ? 'selected' : '';
                                        echo '<option value="' . $row["title"] . '" data-category="' . $row["title"] . '" ' . $selected . '>' . $row["title"] . '</option>';
                                    } ?>

                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="filter_content_type">Content Type:</label>
                            <div class="d-flex align-items-center">
                                <select class="form-control" id="filter_content_type">
                                    <option value="">All Types</option>
                                    <option value="image">Image</option>
                                    <option value="video">Video</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="float-right">
                        <button class="btn btn-success rounded" onclick="applyFilter()">Apply Filter</button>
                        <button class="btn btn-warning rounded" onclick="clearFilter()">Clear Filter</button>
                    </div>
                </div>
            </div>
        </div>
    </div>