MvcPager 分页示例 — 自定义分页按钮模板

Fork me on GitHub

在线演示

帮助文档

该示例演示如何设置MvcPager的分页按钮模板。

分页按钮模板可以是任何HTML代码，模板代码中分页按钮用占位符{0}表示。

示例
源码

NumericPagerItemTemplate = "<strong>{0}</strong>",CurrentPagerItemTemplate = "<span class=\"text-danger\">{0}</span>"

首页上页 ...41424344454647484950...下页尾页

PagerItemTemplate = "{0}&nbsp;"

首页上页 ... 41 42 43 44 45 46 47 48 49 50 ... 下页尾页

CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>"

View：

        @model PagedList<string>
@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id", NumericPagerItemTemplate = "<strong>{0}</strong>",CurrentPagerItemTemplate = "<span class=\"text-danger\">{0}</span>",DisabledPagerItemTemplate = "<span style=\"color:gray\">{0}</span>"})
<hr/>
@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id", PagerItemTemplate = "{0} " })
<hr />
@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>"})

Controller:

        public ActionResult PagerItemsTemplate(int id = 1)
        {
            return View(new PagedList<string>(new string[0], id, 1, 80));
        }