如何显示IList 与分页

Posted 2021-05-01

我有一个错误列表，我需要在浏览器中显示分页，但是，我不是从数据库中提取数据，我是基于许多业务逻辑构建此模型，此列表可能高达1000物品或更多。所有项目都需要在前端可用，滚动的许多项目对用户来说很麻烦，这就是我需要分页机制的原因。

注意：我正在使用asp.net MVC框架

而且，这是我的错误模型

public class ErrorViewModel
{
    public string ErrorType { get; set; }
    public string ErrorMessage { get; set; }
    public string AdditionalMessage { get; set; }
}

答案

你可以使用DataTables插件，它提供客户端搜索和分页（服务器将所有数据传递给客户端，不推荐，但这是你要求的）。

首先，下载DataTables插件并将其包含在项目和布局文件中。

其次，您需要使用Razor语法呈现html表。

@model IEnumerable<ErrorViewModel>

<table class="data-table">
    <thead>
        <tr>
            <th>Error type</th>
            <th>Error message</th>
            <th>Additional message</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var item in Model)
        {
            <tr>
                <td>@Model.ErrorType</td>
                <td>@Model.ErrorMessage</td>
                <td>@Model.AdditionalMessage</td>
            </tr>
        }
    </tbody>
</table>

第三，在布局文件的末尾添加此代码（在导入jQuery和DataTables插件之后）。

<script>
    $(document).ready(function() {
        $('.data-table').DataTable();
    });
</script>

示例：jsbin.com

另一答案

正如Spectarion所建议的那样，你可以使用DataTables插件。由于您使用的是ASP.net MVC，我建议使用DataTables.ASPNet，它为jQuery DataTables提供了很好的服务器端支持和帮助。它易于使用，只需按照文档和下载示例项目。