Fork me on GitHub

MvcPager demo - Using page index box

This sample demonstrates how to allow users to input or select page index from the page index box.

Any text box or select box on the page can be specified as the page index box of MvcPager by setting the property value of PagerOptions.PageIndexBoxId to the ID of text box or select box, if page index box is a text box, MvcPager jQuery plugin will enforce validation on this text box by limiting only digital numbers can be entered into it; if page index box is a select box, MvcPager jQuery plugin can automatically populate it with page indices for users to select.

If the property value of PagerOptions.GoToButton is specified, users will need to click this button to go to the specified page that user entered or selected from page index box, otherwise, MvcPager will automatically jump to that page after the value of the page index box is changed.

Order ID Customer ID Company Name Employee Name
10760 MAISD Maison Dewey Margaret Peacock
10761 RATTC Rattlesnake Canyon Grocery Steven Buchanan
10762 FOLKO Folk och fä HB Janet Leverling
10763 FOLIG Folies gourmandes Janet Leverling
10764 ERNSH Ernst Handel Michael Suyama
TextBox (auto submit after value changed):
First Prev 1 2 3 4 5 6 7 8 9 10 ... Next Last 
Select box (auto submit after selected item changed):
First Prev 1 2 3 4 5 6 7 8 9 10 ... Next Last 
TextBox with go to button:
First Prev 1 2 3 4 5 6 7 8 9 10 ... Next Last 
Select box with go to button:
First Prev 1 2 3 4 5 6 7 8 9 10 ... Next Last 

View:

        
@model PagedList<Order>
<style type="text/css">
    .pibarea {
        float: left;
        margin-left: 2em;
    }
    .pagerdiv {
        width: 100%;
        overflow: auto;
    }
</style>
@Html.Partial("_DataTable", Model)
<h6><strong>TextBox (auto submit after value changed):</strong></h6>
<div class="pagerdiv">
    @Html.Pager(Model).Options(o => o.SetId("pager1").SetPageIndexParameterName("id").SetPageIndexBoxId("pib1").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
    <div class="pibarea"><input type="text" id="pib1" style="width:50px" /></div>
</div>
<div class="pagerdiv">
    <h6><strong>Select box (auto submit after selected item changed):</strong></h6>
    @Html.Pager(Model).Options(o => o.SetId("pager2").SetPageIndexParameterName("id").SetPageIndexBoxId("pib2").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
    <div class="pibarea">
        <select id="pib2"></select>
    </div>
</div>
<div class="pagerdiv">
    <h6><strong>TextBox with go to button:</strong></h6>
    @Html.Pager(Model).Options(o => o.SetId("pager3").SetPageIndexParameterName("id").SetPageIndexBoxId("pib3").SetGoToButtonId("gtb1").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
    <div class="pibarea">
        <input type="text" id="pib3" style="width:50px" /><button id="gtb1">Go</button>
    </div>
</div>
<div class="pagerdiv">
    <h6><strong>Select box with go to button:</strong></h6>
    @Html.Pager(Model).Options(o => o.SetId("pager4").SetPageIndexParameterName("id").SetPageIndexBoxId("pib4").SetGoToButtonId("gtb2").AddHtmlAttribute("style", "float:left").SetPagerItemTemplate("{0}&nbsp;"))
    <div class="pibarea">
        <select id="pib4"></select><button id="gtb2">Go</button>
    </div>
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

_DataTable.cshtml:

@model PagedList<order>
<table class="table table-striped table-bordered">
    <tr>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.OrderId)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.CustomerId)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.CompanyName)
        </th>
    <th class="nowrap">
            @Html.DisplayNameFor(model => model.EmployeeName)
        </th>
    </tr>
    @foreach (var item in Model)
    {
    <tr>
    <td>
                @Html.DisplayFor(modelItem => item.OrderId)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.CustomerId)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.CompanyName)
            </td>
    <td>
                @Html.DisplayFor(modelItem => item.EmployeeName)
            </td>
        </tr>
    }
</table>

Model:

    public class Order
    {
        [Display(Name = "Order ID")]
        public int OrderId { get; set; }
        [Display(Name = "Customer ID"),StringLength(20)]
        public string CustomerId { get; set; }
        [Display(Name = "Order Date")]
        public DateTime OrderDate { get; set; }
        [Display(Name = "Company Name"), StringLength(20)]
        public string CompanyName { get; set; }
        [Display(Name = "Employee Name"), StringLength(20)]
        public string EmployeeName { get; set; }
    }

Controller:

        
        public ActionResult PageIndexBox(int id = 1)
        {
            using (var db = new DataContext())
            {
                return View(db.Orders.OrderBy(o=>o.OrderId).ToPagedList(id, 5));
            }
        }