Paging Sorting Searching In ASP.NET MVC 5

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

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);   
    }   
}  

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

<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.