Поиск, фильтр в 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();
Помогите кто могушь в деле этом непростом, а то вроде сделал, а на деле бесполезная штуковина получилась.