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

Fork me on GitHub

在线演示

帮助文档

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

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

示例
源码

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

首页上页 ...45678910111213...下页尾页

PagerItemTemplate = "{0}&nbsp;"

首页上页 ... 4 5 6 7 8 9 10 11 12 13 ... 下页尾页

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));
        }