Paging Sorting Searching In ASP.NET MVC 5

Background

Paging, Sorting, and Searching is very important when you are working with huge records. In this article, we will use the jQuery data table library to make efficient, responsive Paging, Sorting, and Searching on HTML tables 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" Provide the Project a name as you wish and click on OK.
3. Choose the MVC empty application option and click OK

Step 2. Create Model Class

Right-click on the 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 the 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 returned it as JSON to avoid database query for the 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 the Home folder inside the View folder in the created MVC application.

Give the name Index, click on the 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 the 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 the ID header, It will sort the records in ascending order as in the following.

Now type any text in the textbox, and it will dynamically detect all column records and fetch exact result that you expected as.

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

From all the above examples, I hope you have learned how to search, page, and sort on HTML table in ASP.NET MVC with the help of the 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 the jQuery data table library.
• Since in this article we are using CDN library then you have an active internet connection.

Summary

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