Custom Paging in MVC using jQuery

The following article will demonstrate to you 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 the last page. In the following example, you will learn how to implement custom paging in MVC using a 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{  
   
}

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.