How to Display IList with Paging

Question

I have a list of error that I need to display with paging at the browser, however, I'm not pulling data from the database, I'm building this model based on a number of business logic and this list could be up to 1000 items or more. All items need to be available at the front end, that many items scrolling is cumbersome for users, that's why I need paging mechanism here.

Note: I'm using asp.net MVC framework

And, here's my error model

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

What type of control are you binding to? [This](https://stackoverflow.com/questions/25125329/using-a-pagedlist-with-a-viewmodel-asp-net-mvc) may be of help. — Poosh, Mar 03 '18 at 22:48
@Spectarion PagedList does a server roundtrip on every page number click and displays new items on the page, but I need to display everything on the page with paging, I cannot get them from the server as they are not saved anywhere. perhaps, you can suggest me a good js library... — Shuvo Amin, Mar 04 '18 at 12:05
@Spectarion would you able to give an example, please? How to achieve this via DataTable? — Shuvo Amin, Mar 04 '18 at 13:29

Anis Alibegić · Accepted Answer · 2018-03-04T18:56:53.547

You can use DataTables plugin which provides client-side search and paging (server delivers all the data to the client, not recommended but this is what you asked for).

First, download the DataTables plugin and include it in your project and layout file.

Second, you need to render HTML table using Razor syntax.

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

Third, add this code at the end of your layout file (after you import jQuery and DataTables plugin.).

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

Example here: jsbin.com

score 0 · Answer 2 · answered Mar 04 '18 at 14:36

As suggested by Spectarion, you can use DataTables plugin. Since you're using ASP.net MVC, I suggest using DataTables.ASPNet which provides a nice server-side support and helpers for jQuery DataTables. It is easy to use, just follow the documentation and download the sample project.

How to Display IList with Paging

2 Answers2