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.

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

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.

After doing that the controller should look this way.

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.

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.

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,

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,

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

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

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