MVC中通用/动态表分页的Javascript？

如何解决MVC中通用/动态表分页的Javascript？

当前，我有一个页面可以将多个模型返回到同一视图。从控制器传递到页面的模型是动态的，我创建了一种非常简洁的方法来通过模型属性迭代动态呈现每个表行：

<div>
    <table title="Product">
        @if (Model.Product.Count > 0)
        {
            var productProperties = Model.Product[0].GetType().GetProperties();
            <tr>
                @foreach (var propertyName in productProperties)
                {
                    <th>@propertyName.Name</th>
                }
            </tr>
            @foreach (ProductModel productModel in Model.Product)
            {
                <tr>
                    @foreach (var propertyInfo in productModel.GetType().GetProperties())
                    {
     <td>@productModel.GetType().GetProperty(propertyInfo.Name).GetValue(productModel)</td>
                    }
                </tr>
            }}
    </table>
</div>

为我要在视图中渲染的每个动态模型使用该代码（当前为6）。但是现在我想对这些表进行分页。

我在基本视图中引用的Javascript文件中拥有此文件：

function PopulateTable(arrData,pageNum,tableName) {
    var rowsPerPage = 10;
    var pages;
    var i;
    var pager = '';
    var startIndex;
    var endindex;
    var row;
    var tableName;

    tableName = document.getElementsByTagName('table');
    tableName.find("tr:gt(0)").remove();
    if (arrData != null) {
        // Populate table with data in the current page.
        startIndex = (pageNum - 1) * rowsPerPage;
        endindex = pageNum * rowsPerPage > arrData.length ?
            arrData.length - 1 : pageNum * rowsPerPage - 1;
        for (i = startIndex; i <= endindex; i++) {
            arrData.forEach(serializeRows);

            
            row = '<tr><td>' + arrData[i].ProductID + '</td>'
                + '<td>' + arrData[i].ProductName + '</td>'
                + '<td>' + arrData[i].QuantityPerUnit + '</td></tr>';
            $('#tblProducts').append(row);
        }

        // Show pager row if there is more than one page
        pages = Math.floor(arrData.length / rowsPerPage);
        if (pages < arrData.length / rowsPerPage) {
            pages += 1;
        }
        if (pages > 1) {
            for (i = 0; i < pages; i++) {
                if (i == pageNum - 1) {
                    pager += '<span>' + (i + 1) + '</span>';
                }
                else {
                    pager += '<span><a href="#">' + (i + 1) + '</a></span>'
                }
            }
            pager = '<tr><td colspan="5" class="pagerRow">' +
                pager + '</td></tr>';
            $('#tblProducts').append(pager);

            // Pager link event handler
            $('#tblProducts tr td.pagerRow a').click(function (e) {
                e.preventDefault();
                var pNum = parseInt($(this).text());
                PopulateTable(tableData,pNum);
            });
        }
    }
}

function serializeRows(item,index) {
    document.getElementById("row").innerHTML += '<td>' + index[i].item + '</td>';
}

我如何完成此代码，以便将排序和分页应用于任何视图中的任何表？

（如果重要，我正在使用ASP.NET Core 3.1）