Поиск, фильтр в asp core

У меня есть список песенок, я сделал так чтобы у меня на странице появлялось только 4 песенки, а остальные можно посмотреть есть нажать на pagination, далее я на js сделал фильтр, работает отлично, но есть но я выполняю поиск по классу filter_items и поиск выполняется по элементам на той странице на которой я нахожусь, а как можно сделать поиск для элементов по всем страницам? Ну то есть если я пишу название песни, например "голубая луна", а у меня на странице сейчас нет такого сонга, он на 9 странице, например, как сделать, чтоб эта песенка волшебным образом оказывалась предо мной во всекрасие. Это страница и в сайдбаре поле инпут

<div id="sidebarLeft">
    <label for="filter-input">Search: </label>
    <input type="text" id="filter-input" placeholder="Start writing the song title">
</div>

<div id="centerBox">
    <table class="table  table-condensed">
        <thead>
            <tr>
                <th>Image</th>
                <th>Title</th>
                <th>Author</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr class="filter_items">
                    <td>
                        <a asp-controller="Catalog" asp-action="Detail" asp-route-id="@item.Id">
                            <img class="imgPict" src="@item.ImageUrl" />
                        </a>
                    </td>

                    <td>@item.Title</td>
                    <td>@item.Author</td>
                    <td>@item.Date</td>

                </tr>
            }
        </tbody>
    </table>
</div>

А вот фильтр js

let filter = function () {
    let input = document.getElementById('filter-input');

    input.addEventListener('keyup', function () {
        let filter = input.value.toLowerCase(),
            filterElementsTr = document.querySelectorAll('.filter_items');
        console.log(filterElementsTr);
        filterElementsTr.forEach(item => {
            
            if (item.innerHTML.toLocaleLowerCase().indexOf(filter) > -1) {
            item.style.display = '';
            }
            else {
                item.style.display = 'none';
            }
        });
    });

}

filter();

Помогите кто могушь в деле этом непростом, а то вроде сделал, а на деле бесполезная штуковина получилась.


Ответы (0 шт):