MVC5 Bootstrap Paginator

The MVC Bootstrap Paginator is lightweight and easy to use. It's works out of the box and requires minimal configuration.

@Html.RenderPagination(Model.PagerData, (page, text) => Html.ActionLink())

Note! Do not copy this line into your code, scroll down and copy the last peace of code.

Is it as simple as that? Almost, all you need to do is to create an implementation of IPagerData to pass in as the first arugment of the @Html.RenderPaginator or @Html.RenderPager methods.

public class PagerData : IPagerData {

        private int _Current;
        public int Current {
            get {
                return _Current;
            }
        }

        private int _Total;
        public int Total {
            get {
                return _Total;
            }
        }

        private int _PerPage;
        public int PerPage {
            get {
                return _PerPage;
            }
        }

        public PagerData(int Current, int Total, int PerPage) {
            _Current = Current;
            _Total = Total;
            _PerPage = PerPage;
        }
    }

Note! This class is safe to copy into your project

The back and forward navigation looks funny.. Correct, we need to overload the Html.ActionLink() to let it know that it's Okay to render HTML. Also, we have to tell our Html.ActionLink() helper what page to link to.

@using Share.Bonnet.Pager

@Html.RenderPagination(
    Model.PagerData,
    (page, text) => Html.ActionLink(
        new HtmlContainer(text),
        null,
        new {Page = page}
    )
)

Note! This code is safe to copy into your view

Tip! Instead of @Html.RenderPagination() you can use @Html.RenderPager() to get a different result in Bootstrap.

All done! Enjoy!

Last edited Aug 24, 2014 at 11:07 AM by FrankBonnet, version 8