Razor Pages C 中部分视图的客户端分页#

问：

我是剃须刀页面的初学者。

最初，单击侧边栏上的“电影”选项卡时，我会得到显示电影的表格。然后根据搜索，我的partialView更新以显示数据。我想将客户端分页添加到最初显示的部分视图和数据中。我有 5000 行的表。所以我想要每页 25 条记录。我尝试了bootsrap表，但无法让它工作。以下是我的代码

电影.cshtml

@page
@using Project.Models;
@model Project.Pages.MovieModel

@section scripts {
    <script src= "/UnwatchedMovies.js"></script>
}

<div class="container">
    <div class="col-12">
        <h2> Movie Search </h2>
    </div>
</div>

<div>
    <form method="post" id="movies">
        <div class="row">
            <input type="text" id="searchInput"/>
            <button type="button" id="searchButton" onclick="searchMovies()"></button>  
        </div>
        <div class="row">
            <label class="switch">
                <input type="checkbox" id="toggleMovies" onchange="searchMovies()">
                <div class="slider"></div>
            </label>    
        </div>
    </form>

    <div id="movieDataPartialView">
        @await Html.PartialAsync("Movies/_MovieDataPartial",Model.Movies)
    </div>
</div>

电影.cshtml.cs

namespace Movies.Pages
{
    public class MovieModel : PageModel
    {
        private readonly UnwatchedMovies _unwatchedMovies;
        public MovieModel(UnwatchedMovies unwatchedMovies)
        {
            _unwatchedMovies = unwatchedMovies;
        }
        public List<Movie> Movies {get; set;}

        public void OnGet()
        {
            Movies = _unwatchedMovies.GetMovies(null);
        }

        public PartialViewResult OnPostSearch([FromBody] Search search) 
        {
            Movies = _unwatchedMovies.GetMovies(search);
            return new PartialViewResult
            {
                ViewName = "Movies/_MovieDataPartial",
                ViewData = new ViewDataDictionary<List<Movie>>(ViewData, Movies)
            }
        }
    }
}

_MovieDataPartial.cshtml（部分视图）

@model.List<Project.Models.Movie>

<div>
    <table id="tableData">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Ratings</th>
                <th scope="col">Genre</th>
            </tr>
        </thead>
        <tbody id="bodyData">
            @foreach(var movie in Model)
            {
                <td>@movie.Name</td>
                <td>@movie.Ratings</td>
                <td>@movie.Genre</td>
            }
        </tbody>
    </table>
</div>

我想显示客户端分页。如果 jquery 和 ajax 也可以用来实现相同的目的，那就太好了。