How to implement Custom Paging and sorting in webgrid using jquery.


In this post, I am going to explain how to implement Custom Paging and sorting in webgrid using jquery.
In My previous post, I have explained How we can implement Custom Paging in webgrid in MVC4 application.

Here In this post, I would like to explore How we can implement Custom Paging and sorting in webgrid using jquery. It is an essential approach to use paging and sorting technique in applications where a lot of data to be loaded from database asynchronously.

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for fetch data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one tables as below

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a new Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Step-6: Add new action into your controller for get the view for display data.

Here I have added "Index" Action into "Webgrid" Controller. Please write this following code

            public ActionResult List()
                return View();

Step-7: Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
Complete View
                ViewBag.Title = "List";

            <h2>Customer List</h2>
            <div id="demoArea">
                @{Html.RenderAction("GetCustomerData", "Webgrid");}

            @* Here I will write jquery code for webgrid paging and sorting *@

            @section Scripts{
                    $(document).ready(function () {

                        //thead th a ---> webgrid header link (sorting) , tfoot a     --> webgrid footer link (paging)

                        $("#demoArea").on("click", "thead th a, tfoot a", function (e) {
                            var param = $(this).attr('href').split('?')[1];
                            var url = '@Url.Action("GetCustomerData","Webgrid")' + '?' + param;
                                url: url,
                                data: '',
                                dataType: 'html',
                                success: function (data) {
                                error: function () {

Step-8: Add a new Class (Model).

Right Click on Models Folder > Add > New > Class > Enter Class Name > Add.
Write following code...

            using System.Collections.Generic;
            namespace MVCSortingPagingJquery.Models
                public class CustomerDataModel
                    public List<CustomerInfo> Customer { get; set; }
                    public int PageSize { get; set; }
                    public int TotalRecord { get; set; }
                    public int NoOfPages { get; set; }

Step-9: Add Reference of System.Linq.Dynamic from a new Class (Model).

Right Click on References > Manage NuGet Packages > Seach online with "System.Linq.Dynamic" keyword > Select & install System.Linq.Dynamic

Step-10: Add another action for get partial view with filtered Data.

Write following code...

            public ActionResult GetCustomerData(int page = 1, string sort = "CustomerName", string sortdir = "ASC")
                CustomerDataModel cdm = new CustomerDataModel();
                cdm.PageSize = 4;
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                    cdm.TotalRecord = dc.CustomerInfoes.Count();
                    cdm.NoOfPages = (cdm.TotalRecord / cdm.PageSize) + ((cdm.TotalRecord % cdm.PageSize) > 0 ? 1 : 0);
                    cdm.Customer = dc.CustomerInfoes.OrderBy(sort + " " + sortdir).Skip((page - 1) * cdm.PageSize).Take(cdm.PageSize).ToList();
                return PartialView("_dataList", cdm);

Step-11: Add Partial View & design.

Right Click on Shared folder > Add > View > Enter View Name > Checked "Create a Strongly-Typed view" > Select Model Class > Checked "Create as a partial view" > Add.
[N:B:Please Rebuild solution before add view.]
Complete View
            @model MVCSortingPagingJquery.Models.CustomerDataModel
                var grid = new WebGrid(rowsPerPage: Model.PageSize);
                grid.Bind(Model.Customer, autoSortAndPage: false, rowCount: Model.TotalRecord);

                columns: grid.Columns(
                            grid.Column("CustomerID","Customer ID"),
                            grid.Column("CustomerName", "Customer Name"),
                            grid.Column("Address", "Address"),
                            grid.Column("City", "City"),
                            grid.Column("PostalCode", "Postal Code")

            @* Css for good looks of webgrid *@
            <style type="text/css">
                    table.gridtable {
                        font-family: verdana,arial,sans-serif;
                        border-width: 1px;
                        border-color: #666666;
                        border-collapse: collapse;
                    table.gridtable th {
                        border-width: 1px;
                        padding: 8px;
                        border-style: solid;
                        border-color: #666666;
                        background-color: #dedede;
                    table.gridtable td {
                        border-width: 1px;
                        padding: 8px;
                        border-style: solid;
                        border-color: #666666;
                        background-color: #ffffff;

Step-12: Run Application.

 How to implement Custom Paging and sorting in webgrid using jquery.

Related Post :

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.