Paging Sorting Searching In ASP.NET MVC 5

Background

Paging, Sorting , Searching is very important when you are working with huge records. In this article we will use jQuery data table library to make efficient, responsive Paging, Sorting, Searching on html table in ASP.NET MVC with json data. So let's start step by step, so it will be useful to understand from scratch.

Step 1: Create MVC application

1. "Start", then "All Programs" and select "Microsoft Visual Studio 2015".
   
2. "File", then "New" and click "Project", then select "ASP.NET Web Application Template" and provide the Project a name as you wish and click on OK.
   
3. Choose MVC empty application option and click OK

Step 2: Create Model Class

Right click on Model folder in the created MVC application, give the class name Employee or as you wish and click OK.

Employee.cs

public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string City { get; set; }
        public string Address { get; set; }
    }

 Step 3: Add controller class

Right click on Controller folder in the created MVC application, give the class name Home or as you wish and click OK.

HomeController.cs 

public class HomeController : Controller
    {
        // GET: Home
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public JsonResult EmpDetails()
        {
            //Creating List
            List<Employee> ObjEmp = new List<Employee>()
        {
            //Adding records to list
            new Employee
            {
                Id = 1, Name = "Vithal Wadje", City = "Latur", Address = "Kabansangvi"
            },
            new Employee
            {
                Id = 2, Name = "Sudhir Wadje", City = "Mumbai", Address = "Kurla"
            },
             new Employee
            {
                Id = 3, Name = "Dinesh Beniwal", City = "New Delhi", Address = "Noida"
            },
               new Employee
            {
                Id = 4, Name = "Dhananjay Kumar", City = "New Delhi", Address = "Delhi"
            },
                 new Employee
            {
                Id = 5, Name = "Jitendra Gund", City = "Pune", Address = "Pune"
            },
                   new Employee
            {
                Id = 6, Name = "Anil Kumar", City = "chandigarh", Address = "chandigarh"
            },
                     new Employee
            {
                Id = 7, Name = "Ramesh", City = "Mumbai", Address = "Kurla"
            },
                       new Employee
            {
                Id = 8, Name = "Sachin", City = "XYZ", Address = "XYZ"
            },
                                    new Employee
            {
                Id = 9, Name = "Ravi", City = "XYZ", Address = "XYZ"
            },
                                                 new Employee
            {
                Id = 10, Name = "Kapil", City = "XYZ", Address = "XYZ"
            },
                                                              new Employee
            {
                Id = 11, Name = "Vivek", City = "XYZ", Address = "XYZ"
            }
        };
            //return Json
            return Json(ObjEmp, JsonRequestBehavior.AllowGet);
        }
    }

In the above controller class JsonResult method EmpDetails we have added the records into the Generic list and returning it as JSON to avoid database query for same result.

To work with JQuery we need the following JQuery library,

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

 Step 4: Add Partial view

Right click on Home folder inside the View folder in the created MVC application as:

 

Give the name Index, click on Add button and write the following code.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        //Call EmpDetails jsonResult Method
        $.getJSON("Home/EmpDetails",
        function (json) {
        var tr;
        //Append each row to html table
        for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].Id + "</td>");
                tr.append("<td>" + json[i].Name + "</td>");
                tr.append("<td>" + json[i].City + "</td>");
                tr.append("<td>" + json[i].Address + "</td>");
                $('table').append(tr);
            }
        });
    });
</script>
<table class="table table-bordered table-condensed table-hover table-striped">
        <thead>
        <tr>
        <th>Id</th>
        <th>Name</th>
        <th>City</th>
        <th>Address</th>
        </tr>
        </thead>
        <tbody></tbody>
</table>

Step 5: Run the application

After running the application the output will be as in the following screenshot without paging.

In the preceding example data came without paging, sorting and searching.

Step 6: Enabled paging, sorting and searching using jQuery data table 

To enable the paging, sorting and searching using jQuery data table we need the jQuery data table library. There are many ways to add this library but in this article we are using CDN library which has the following CDN path,

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

Now make changes into the jQuery function and add $('#EmpInfo').DataTable();  function just after the Json table binding is over, after referencing all the necessary files and code then Index.cshtml code will be as in the following,

Index.cshtml

@{
    ViewBag.Title = "www.compilemode.com";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>

    $(document).ready(function () {
        //Call EmpDetails jsonResult Method
        $.getJSON("Home/EmpDetails",
        function (json) {
            var tr;

        //Append each row to html table
        for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + json[i].Id + "</td>");
                tr.append("<td>" + json[i].Name + "</td>");
                tr.append("<td>" + json[i].City + "</td>");
                tr.append("<td>" + json[i].Address + "</td>");
                $('table').append(tr);

        }
        $('#EmpInfo').DataTable();
        });

    });

</script>
<hr />
<div class="form-horizontal">
    <table id="EmpInfo" class="table table-bordered  table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>City</th>
                <th>Address</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

</div>

Now run the application output will be like the following,

 

 

Now click on Id header, It will sort the records in ascending order as in the following,
 

 

Now type any text in textbox, it will dynamically detect all column records and fetches exact result what you expected as,

 

 

Now type anything which does not exist in the above records then it will show following message in grid,

 

 

From all the above examples, I hope you have learned how to make searching, paging and sorting on html table in ASP.NET MVC with the help of jQuery data table library.

Note:

• For the complete code, please download the sample zip file.
  
• You need to use the jQuery library.
• You need to use jQuery data table  library.
• Since in this article we are using CDN library then you have active internet connection.
  

Summary

I hope this article is useful for all readers. If you have a suggestion then please contact me.