杨涛主页
Fork me on GitHub

 在线演示

 帮助文档

 源 代 码

MvcPager 分页示例 — Javascript API操作HtmlPager

本示例演示如何使用客户端Javascript API的goToPage方法来使HtmlPager跳转到指定页。

使用Javascript API操作MvcPager时，必须用Html.RegisterMvcPagerScriptResource()注册MvcPager的客户端脚本库。

goToPage方法在跳转前会对传入的页索引参数进行有效性验证，如果传入的页索引不是有效的数值，则会显示PagerOptions.InvalidPageIndexErrorMessage属性中设置的错误信息，如果页索引小于0或大于总页数，则会显示PagerOptions.PageIndexOutOfRangeErrorMessage属性中设置的错误信息。可以在本示例中输入进行测试查看效果。

转到第 页
序号 文章标题 作者 文章来源
1 吴起热线微信公众号上线 Webdiyer 吴起热线
2 再到吴起观“绿海” Webdiyer 吴起热线
3 吴起：从贫困县到全国百强 Webdiyer 吴起热线
4 吴起县铁边城入围全省31个文化旅游名镇 Webdiyer 吴起热线
5 吴起特色养殖成农民致富首选 Webdiyer 吴起政府网

View：

@model PagedList<article>
        <div class="well well-sm">
        <div class="input-group" style="width:35%">
        <span class="input-group-addon">转到第</span>
        <input type="text" id="pagebox" class="form-control input-sm" />
        <span class="input-group-addon">页</span>
        <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goBtn">跳转</button></span>
        </div>
    </div>
    @{Html.RenderPartial("_ArticleTable", Model);}
        <div class="text-center">
        @Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id",Id = "htmlPager", FirstPageText = "<<", LastPageText = ">>", NextPageText = ">", PrevPageText = "<", ContainerTagName = "ul", CssClass = "pagination pagination-sm", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" })
    </div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}
        <script type="text/javascript">
    $(function () {
        $("#goBtn").click(function () {
            var pager = Webdiyer.MvcPagers.getById("htmlPager");
            if (pager != null) {
                pager.goToPage($("#pagebox").val());
            } else { alert("找不到指定的MvcPager！"); }
        });
    });
    </script>
}

_ArticleTable.cshtml:

@model PagedList<Article>
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PubDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Source)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PubDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Source)
            </td>
        </tr>
    }
</table>

Model:

    public class Article
    {
        [Display(Name="文章编号")]
        public int ID { get; set; }
        [Display(Name="文章标题")]
        [MaxLength(200)]
        public string Title { get; set; }
        [Display(Name = "文章内容")]
        public string Content { get; set; }
        [Display(Name = "发布日期")]
        public DateTime PubDate { get; set; }
        [Display(Name = "作者")]
        [MaxLength(20)]
        public string Author { get; set; }
        [Display(Name = "文章来源")]
        [MaxLength(20)]
        public string Source { get; set; }
    }

Controller:

        
        public ActionResult JavascriptApiHtml(int id = 1, int pageIndex = 1)
        {
            using (var db = new DataContext())
            {
                return View(db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5));
            }
        }