In this article, I am going to demonstrate how to implement custom paging in asp.net MVC using jquery. Custom paging will increase the performance of the page. Keep reading on ASP.NET MVC full Ajaxify and Bootstrap Grid with Crud Operation
Custom Pagination in MVC using jQuery, Ajax, and Partial View
Custom paging in MVC is very helpful when presenting a huge amount of data on a webpage. In one of my web application, the requirement was such that the pagination should have numeric paging as well as links to previous, next, first and last page. In the following example, you will learn how to implement custom paging in MVC using partial view.
Create a SQL Table:
CREATE TABLE [dbo].[City]( [CityID] [int] IDENTITY(1,1) NOT NULL, [CityName] [nvarchar](max) NULL, CONSTRAINT [PK_City] PRIMARY KEY CLUSTERED ( [CityID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] CREATE TABLE [dbo].[Employee]( [Id] [int] IDENTITY(1,1) NOT NULL, [CityID] [int] NOT NULL, [Name] [nvarchar](max) NULL, [Email] [nvarchar](max) NULL, [Salary] [decimal](18, 2) NULL, [BirthDate] [datetime] NULL, [CreatedDate] [datetime] NULL, [IsActive] [bit] NULL, CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
Sample1.cshtml:
@using EmployeeManagement.Logic
@using EmployeeManagement.Helpers
@model EmployeeModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row header-title">
<div class="title">Sample 1 - Custom Grid with paging</div>
<hr class="hr-tp-0" />
</div>
<div class="row" id="Sample1List">
@Html.Partial("Sample1List", Model)
</div>
@section scripts{
}
Sample1List.cshtml:
@using EmployeeManagement.Logic
@model EmployeeModel
@using PagedList.Mvc
@using EmployeeManagement.Helpers
@using EmployeeManagement.Model
@{
int i = 0;
int count = Model.Filters.Count() + 1;
int id = Model.Table == null ? 0 : Model.Table.Id;
}
<div class="table-responsive">
<table id="tblSample1" class="table table-striped table-bordered table-hover">
<thead>
<tr class="header-title">
@foreach (var filter in Model.Filters)
{
if (filter.ColumnName.ToLower() != "id")
{
<th @(filter.ColumnName == "CityID" ? "style=display:none" : "")>
@filter.ColumnName
@*@Html.Sorter(filter.ColumnName, filter.ColumnName, Model.dynamicListMetaData.TotalItemCount, "Sample1FilterSearch",
"Home", new AjaxOptions() { UpdateTargetId = "Sample1List", OnSuccess = "", OnBegin = "beforePage" },
new { page = Model.dynamicListMetaData.PageNumber, sortOrder = filter.ColumnName == Model.fieldName ? Model.sortOrder : "" })*@
</th>
}
i++;
}
</tr>
</thead>
@if (Model != null && Model.dynamicList.Count() > 0)
{
<tbody>
@foreach (var item in Model.dynamicList)
{
<tr>
@foreach (var column in item)
{
string columnName = column.Key;
string columnValue = column.Value == null ? string.Empty : Convert.ToString(column.Value);
if (columnName.ToLower() != "id")
{
<td @(columnName == "CityID" ? "style=display:none" : "")>
@if (columnName.Contains("IsActive"))
{
columnValue = columnValue == null ? "false" : columnValue;
@Html.CustomCheckbox(columnName, columnValue == null ? "false" : columnValue, new { @disabled = "disabled" })
}
else if (columnName.ToLower().Contains("date"))
{
columnValue = string.IsNullOrEmpty(columnValue) ? "" : Convert.ToDateTime(columnValue).ToString("yyyy-MM-dd hh:mm tt");
@Html.Raw(columnValue)
}
else
{
@Html.Raw(columnValue)
}
</td>
}
}
</tr>
}
</tbody>
}
else
{
<tbody>
<tr>
<td colspan="@count">
No data
</td>
</tr>
</tbody>
}
<tfoot>
@if (Model != null && Model.dynamicList.Count() != 0)
{
<tr>
<td colspan="@count">
<div class="fixed-table-pagination" style="display: block;">
<div class="pull-left">
@Html.PagedListPager(new PagedList.StaticPagedList<dynamic>(Model.dynamicList, Model.dynamicListMetaData),
page => Url.Action("Sample1FilterSearch", new
{
page,
pageSize = Model.dynamicListMetaData.PageSize,
TotalItemCount = Model.dynamicListMetaData.TotalItemCount,
CurrentPage = Model.dynamicListMetaData.PageNumber,
sortOrder = Model.sortOrder,
fieldName = Model.fieldName,
IsShowControls = true,
IsShowFirstLast = true,
IsShowPages = true
}), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new MyCustomNextPrevNumberRenderOptions(), new AjaxOptions()
{ HttpMethod = "POST", UpdateTargetId = "Sample1List", }))
</div>
<div class="pull-right pagination-detail header-title pd-tp-bt-10">
<span class="pagination pagination-info">
Page @(Model.dynamicListMetaData.PageCount < Model.dynamicListMetaData.PageNumber ? 0 : Model.dynamicListMetaData.PageNumber) of @Model.dynamicListMetaData.PageCount
/
@(Model.dynamicListMetaData.TotalItemCount) items in @(Model.dynamicListMetaData.PageCount) pages
</span>
</div>
</div>
</td>
</tr>
}
</tfoot>
</table>
</div>
HomeController:
namespace EmployeeManagement.Controllers
{
public class HomeController : Controller
{
CommonFunction common = new CommonFunction();
public ActionResult Index()
{
return View();
}
#region Sample1 - Custom Grid with paging
public ActionResult Sample1(int page = 1, int pageSize = 10)
{
EmployeeModel objModel = new EmployeeModel();
objModel.StaticPageSize = 10;
BindSample1(objModel, page, pageSize);
return View(objModel);
}
public ActionResult Sample1FilterSearch(EmployeeModel objModel, int page = 1, int pageSize = 10)
{
BindSample1(objModel, page, pageSize);
return PartialView("Sample1List", objModel);
}
public void BindSample1(EmployeeModel objModel, int page, int pageSize)
{
CityManager objCityManager = new CityManager(new DataContext());
EmployeeManager context = new EmployeeManager(new DataContext());
StringBuilder query = new StringBuilder();
List<string> colName = common.GetColumns(CommonFunction.module.Employee.ToString());
query = common.GetSqlTableQuery(CommonFunction.module.Employee.ToString());
if (objModel != null)
objModel.StaticPageSize = pageSize;
//objModel.CityList = Extens.ToSelectList(objCityManager.GetDtCity(), "CityID", "CityName");
context.setModel(query, objModel, colName, "Name", page, pageSize);
}
#endregion
}Live Demo | Download Source Code
Conclusion
I hope you liked this article on custom pagination in MVC using jquery. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
You may also like:
Leave a Reply