MENU

Paging Searching And Sorting on HTML Table In ASP.NET MVC

Filed Under: , , , , , , , on
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.
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 and add the controller class as:

Now after selecting controller template, click on add button then the following window appears,



Specify the controller name and click on add button, Now open the HomeController.cs file and write the following code into the Home controller class as:
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 or any higher version 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.

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode