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
  1. public class Employee  
  2.     {  
  3.         public int Id { getset; }  
  4.         public string Name { getset; }  
  5.         public string City { getset; }  
  6.         public string Address { getset; }  
  7.     } 
 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 
  1. public class HomeController : Controller  
  2.     {  
  3.         // GET: Home  
  4.         [HttpGet]  
  5.         public ActionResult Index()  
  6.         {  
  7.             return View();  
  8.         }  
  9.   
  10.         [HttpGet]  
  11.         public JsonResult EmpDetails()  
  12.         {  
  13.             //Creating List      
  14.             List<Employee> ObjEmp = new List<Employee>()  
  15.         {    
  16.             //Adding records to list      
  17.             new Employee  
  18.             {  
  19.                 Id = 1, Name = "Vithal Wadje", City = "Latur", Address = "Kabansangvi"  
  20.             },  
  21.             new Employee  
  22.             {  
  23.                 Id = 2, Name = "Sudhir Wadje", City = "Mumbai", Address = "Kurla"  
  24.             },  
  25.              new Employee  
  26.             {  
  27.                 Id = 3, Name = "Dinesh Beniwal", City = "New Delhi", Address = "Noida"  
  28.             },  
  29.                new Employee  
  30.             {  
  31.                 Id = 4, Name = "Dhananjay Kumar", City = "New Delhi", Address = "Delhi"  
  32.             },  
  33.                  new Employee  
  34.             {  
  35.                 Id = 5, Name = "Jitendra Gund", City = "Pune", Address = "Pune"  
  36.             },  
  37.                    new Employee  
  38.             {  
  39.                 Id = 6, Name = "Anil Kumar", City = "chandigarh", Address = "chandigarh"  
  40.             },  
  41.                      new Employee  
  42.             {  
  43.                 Id = 7, Name = "Ramesh", City = "Mumbai", Address = "Kurla"  
  44.             },  
  45.                        new Employee  
  46.             {  
  47.                 Id = 8, Name = "Sachin", City = "XYZ", Address = "XYZ"  
  48.             },  
  49.                                     new Employee  
  50.             {  
  51.                 Id = 9, Name = "Ravi", City = "XYZ", Address = "XYZ"  
  52.             },  
  53.                                                  new Employee  
  54.             {  
  55.                 Id = 10, Name = "Kapil", City = "XYZ", Address = "XYZ"  
  56.             },  
  57.                                                               new Employee  
  58.             {  
  59.                 Id = 11, Name = "Vivek", City = "XYZ", Address = "XYZ"  
  60.             }  
  61.         };  
  62.             //return Json      
  63.             return Json(ObjEmp, JsonRequestBehavior.AllowGet);  
  64.         }  
  65.     } 
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,
  1. <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.
  1. <script src="~/Scripts/jquery-1.10.2.min.js"></script>    
  2. <script>    
  3.     $(document).ready(function () {    
  4.         //Call EmpDetails jsonResult Method    
  5.         $.getJSON("Home/EmpDetails",    
  6.         function (json) {    
  7.         var tr;    
  8.         //Append each row to html table    
  9.         for (var i = 0; i < json.length; i++) {    
  10.                 tr = $('<tr/>');    
  11.                 tr.append("<td>" + json[i].Id + "</td>");    
  12.                 tr.append("<td>" + json[i].Name + "</td>");    
  13.                 tr.append("<td>" + json[i].City + "</td>");    
  14.                 tr.append("<td>" + json[i].Address + "</td>");    
  15.                 $('table').append(tr);    
  16.             }    
  17.         });    
  18.     });    
  19. </script>    
  20. <table class="table table-bordered table-condensed table-hover table-striped">    
  21.         <thead>    
  22.         <tr>    
  23.         <th>Id</th>    
  24.         <th>Name</th>    
  25.         <th>City</th>    
  26.         <th>Address</th>    
  27.         </tr>    
  28.         </thead>    
  29.         <tbody></tbody>    
  30. </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,
  1. <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">  
  2. <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
  1. @{  
  2.     ViewBag.Title = "www.compilemode.com";  
  3. }  
  4. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  5. <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">  
  6. <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>  
  7. <script>  
  8.   
  9.     $(document).ready(function () {  
  10.         //Call EmpDetails jsonResult Method  
  11.         $.getJSON("Home/EmpDetails",  
  12.         function (json) {  
  13.             var tr;  
  14.   
  15.         //Append each row to html table  
  16.         for (var i = 0; i < json.length; i++) {  
  17.                 tr = $('<tr/>');  
  18.                 tr.append("<td>" + json[i].Id + "</td>");  
  19.                 tr.append("<td>" + json[i].Name + "</td>");  
  20.                 tr.append("<td>" + json[i].City + "</td>");  
  21.                 tr.append("<td>" + json[i].Address + "</td>");  
  22.                 $('table').append(tr);  
  23.   
  24.         }  
  25.         $('#EmpInfo').DataTable();  
  26.         });  
  27.   
  28.     });  
  29.   
  30. </script>  
  31. <hr />  
  32. <div class="form-horizontal">  
  33.     <table id="EmpInfo" class="table table-bordered  table-hover">  
  34.         <thead>  
  35.             <tr>  
  36.                 <th>Id</th>  
  37.                 <th>Name</th>  
  38.                 <th>City</th>  
  39.                 <th>Address</th>  
  40.             </tr>  
  41.         </thead>  
  42.         <tbody></tbody>  
  43.     </table>    
  44.   
  45. </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.


Similar Articles