Fork me on GitHub

MvcPager demo - Navigation buttons position

This sample demonstrates how to set the position of Navigation buttons (the first, last, previous and next pager items).

Default(NavigationPagerItemsPosition = PagerItemsPosition.BothSide):
Left(NavigationPagerItemsPosition = PagerItemsPosition.Left):
Right(NavigationPagerItemsPosition = PagerItemsPosition.Right):

View:

        
@model PagedList<string>
<h6><strong>Default(NavigationPagerItemsPosition = PagerItemsPosition.BothSide):</strong></h6>
@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>", Id = "pager1" })
  
<h6><strong>Left(NavigationPagerItemsPosition = PagerItemsPosition.Left):</strong></h6>
<div class="row" style="height:80px">
    <div class="col-xs-8">
        @Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id",NumericPagerItemCount = 5, 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>", Id = "pager2", PageIndexBoxId = "pageIndexBox", GoToButtonId = "goToBtn",NavigationPagerItemsPosition = PagerItemsPosition.Left})
    </div>
    <div class="col-xs-4">
        <div class="input-group" style="width:120px;margin:20px 0">
            <select id="pageIndexBox" class="form-control input-sm"></select>
            <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn">Go</button></span>
        </div>
    </div>
</div>
<h6><strong>Right(NavigationPagerItemsPosition = PagerItemsPosition.Right):</strong></h6>
<div class="row" style="height:80px">
    <div class="col-xs-8">
        @Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id",NumericPagerItemCount = 5,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>", Id = "pager3", PageIndexBoxId = "pageIndexBox2", GoToButtonId = "goToBtn2", NavigationPagerItemsPosition = PagerItemsPosition.Right })
    </div>
    <div class="col-xs-4">
        <div class="input-group" style="width:120px;margin:20px 0">
            <input type="text" id="pageIndexBox2" class="form-control input-sm"/>
            <span class="input-group-btn"><button class="btn btn-primary btn-sm" id="goToBtn2">Go</button></span>
        </div>
    </div>
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

Controller:

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