MVC Pager 使用

  MVC Pager  4.0+     3.0版本使用  ，直接来点使用的。一看就明白

      @Ajax.Pager(Model,pagerOptions,mvcAjaxOptions);

@using Webdiyer.WebControls.Mvc;
@model PagedList<UserInfoJson>


@{
    PagerOptions pagerOptions = new PagerOptions()
    {
        PageIndexParameterName = "CurPage",
        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>"
    };
    MvcAjaxOptions mvcAjaxOptions = new MvcAjaxOptions()
    {
        LoadingElementDuration = 300,
        LoadingElementId = "loaddingdiv",
        HttpMethod = "Post",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "update"
    };
}

@{Html.RegisterMvcPagerScriptResource();}

 

需要注意的是不要忘记注册：  

@section scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
}

如果你使用上面的不行，就试试这个：　　@{Html.RegisterMvcPagerScriptResource();}

CurPage  是后台接收参数的 变量名称   必须对应

页面需要引用
@using Webdiyer.WebControls.Mvc;
@model PagedList<UserInfoJson>

注意初始化：@{Html.RegisterMvcPagerScriptResource();}

后台：Action
     var model = new PagedList<UserInfoJson>(r_listobj, dataHelper.CurPage, dataHelper.PageSize, listCount);
            return View(model);

listCount：数据的总数量

r_listobj:数据列表对象

CurPage：当前要访问的页

PageSize:一页多少个


html
    <div class="container-fluid">
        @*@Ajax.Pager(Model, pagerOptions, mvcAjaxOptions);*@
        <div class="row">
            <div class="col-xs-8">
                @Ajax.Pager(Model, pagerOptions, mvcAjaxOptions);
            </div>
            <div class="col-xs-4">
                <div class="input-group" style="margin:20px 0">
                    <span class="input-group-addon">共 @ViewBag.Count 条数据</span>
                    <span class="input-group-addon">转到第</span>
                    <input type="text" id="pageIndexBox2" class="form-control input-sm" />
                    <span class="input-group-addon">页</span>
                    <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">跳转</button></span>
                </div>
            </div>
        </div>
    </div>

注意：如果你的异步  分页 没有异步刷新  部分视图的话。  那就是你的  分页控件放错位置了。或者 没有注册 脚本。
如果对你有帮助  就赞一下吧。如果有问题  请留言