Use DataTable.js In MVC View

In this tutorial, I will describe the process of how to create a simple datable in MVC using a data tables plugin from Jquery.

Let's begin the process.

Open Visual Studio, and create a new MVC project:

File > New > Project

Select MVC App from C# web options and click OK.

Web options

Wait for Visual Studio to finish creating the application, then create a new class with the name Person under the Models folder.

Visual Studio

And add the following properties to this class.

public class Person 
{  
    public string Name { get; set; }  
    public string Address { get; set; }  
    public string LastName { get; set; }  
}

Now Open the default-created Controller under the Controllers Folder, and delete any default-created ActionResult Method except the Index ActionResult one.

ActionResult Method

After doing that the controller should look this way.

Controller

Now, create the following function inside this controller and we are going to call it through an AJAX Request later.

[HttpGet]  
public JsonResult GetListInfo() 
{    
    // Create a new list of type person  
    var Info = new List<Person>();  
    // Add some objects to list  
    Info.Add(new Person { Name = "Pedro", LastName = "Jimenez", Address = "Some Address 1" });    
    Info.Add(new Person { Name = "Juan", LastName = "Diaz", Address = "Some Address 2" });  
    Info.Add(new Person { Name = "Ricardo", LastName = "Perez", Address = "Some Address 3" });  
    // Return Info as JSON  
    return Json(Info, JsonRequestBehavior.AllowGet);    
}

Now your controller should look this way.

Home controller

Now let's move to the front-end side.

We need the following files for the front-end operations.

Jquery
Datatables js and css files.

We are going to reference the CDN of those files in our Index view so we won't need to download the files.

Open the Default Created Index View file under the Views/Home folder.

Home folder

Replace all content inside that file with the following content and read the comments that describe how the process works.

@* Import jQuery and DataTables JS and CSS files  
It is very important to import jQuery before the JS file for DataTables *@  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>      
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />    
<div class="container">     
    <div>      
        <h3 class="text-center">Person List Information</h3>    
    </div>      
    <table id="TblInfo" class="table table-bordered table-striped mt-4">      
        <thead>      
            <tr class="bg-primary text-light">      
                <td>Name</td>      
                <td>LastName</td>     
                <td>Address</td>    
            </tr>    
        </thead>    
        <tbody class="InfoTBody">    
        </tbody>    
    </table>      
</div>    
<script type="text/javascript">    
    $(document).ready(function () { // execute AJAX after HTML elements have been rendered    
        var urlRequest = "/Home/GetListInfo"; // URL with the controller's name and the JSON request function    
        $.get(urlRequest, function (data) { // do AJAX GET request    
            var rows = '';      
            $.each(data, function (index, item) { // build tbody content using each function    
                rows += "<tr>";    
                rows += "<td>" + item.Name + "</td>";    
                rows += "<td>" + item.LastName + "</td>";    
                rows += "<td>" + item.Address + "</td>";    
                rows += "</tr>";    
            });     
            $('.InfoTBody').html(rows); // append all content inside table's tbody (using class selector)    
        }).done(function () { // done is being executed at the very end of the AJAX process    
            $('#TblInfo').DataTable(); // We need to call DataTable function after the process to build the table's body has finished.    
        });    
    });    
</script>

Important Note

It is very important to check the definition of your table. In order to make data table plugin work your table should have a thread tag and a tbody tag as well, without those you will get some errors. Also be sure to have only one reference to JQuery file, if you have more than one you will get some errors too.

Run the application, and you should get the following result,

Application

Now to test the search functionality type something inside the search text box and you will get real-time results as shown in the following picture,

Text box

Also if the list has many records, the table's paginator will automatically be increased to allow users to change pages of the table.

User

To test that, you can add more items in the jsonResult function inside Homecontroller, add more than 10 items to test the paginator.

JSONResult function

And that’s it, I hope this helps you to understand the basic usage of data tables plugin.