Client-side pagination for Partial View in Razor Pages C#

I am a beginner in razor pages.

Initially on clicking the Movies tab on sidebar, I get the table with movies displayed. Then based on search my partialView updates to display the data. I want to add client-side pagination to the partial view and data that is displayed initially. I have table with 5000 rows. So I want 25 records per page. I tried bootsrap table but was not able to get it work. Below is my code

Movies.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>

Movies.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(Partial View)

@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>

I want to display client-side pagination. If jquery and ajax can also be used to achieve the same it would be great.