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 datatables 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:
 
Use DataTable.js In MVC View
 
Wait for Visual Studio to finish creating the application, then create a new class with the name Person under Models folder:
 
Use DataTable.js In MVC View
 
And add the following properties to this class.
  1. public class Person {  
  2.     public string Name {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     public string Address {  
  7.         get;  
  8.         set;  
  9.     }  
  10.     public string LastName {  
  11.         get;  
  12.         set;  
  13.     }  
  14. }   
Now Open the default-created Controller under Controllers Folder, and delete any default created ActionResult Method except the Index ActionResult one,
 
Use DataTable.js In MVC View
 
After doing that the controller should look this way,
 
Use DataTable.js In MVC View
 
Now, create the following function inside this controller and we are going to call it through an AJAX Request later,
  1. [HttpGet]  
  2. public JsonResult GetListInfo() {    
  3.    //Create a new list of type person  
  4.    var Info = new List<Person>();  

  5.    //add some objects to list  
  6.    Info.Add(new Person { Name = "Pedro", LastName = "Jimenez", Address = "Some Address 1" });    
  7.    Info.Add(new Person { Name = "Juan", LastName = "Diaz", Address = "Some Address 2" });  
  8.    Info.Add(new Person { Name = "Ricardo", LastName = "Perez", Address = "Some Address 3" });  
  9.    
  10.    //return Info as json  
  11.    return Json(Info, JsonRequestBehavior.AllowGet);    
  12. }  
Now your controller should look this way,
 
Use DataTable.js In MVC View
 
Now let's move to the front end side.
 
We need the following files for the frontend 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 Default Created Index View file under Views/Home folder,
 
Use DataTable.js In MVC View
 
Replace all content inside that file with the following content and read the comments that describe how the process works,
  1. @*Import Jquery and datatable js and css files  
  2. It is very important to import jquery before the js file for datatables*@  
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     
  4. <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>      
  5. <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />    
  6.   
  7. <div class="container">     
  8. <div>      
  9.    <h3 class="text-center">Person List Information</h3>    
  10. </div>      
  11. <table id="TblInfo" class="table table-bordered table-striped mt-4">      
  12. <thead>      
  13.    <tr class="bg-primary text-light">      
  14.       <td>Name</td>      
  15.       <td>LastName</td>     
  16.       <td>Address</td>    
  17.    </tr>    
  18. </thead>    
  19.    <tbody class="InfoTBody">    
  20.    </tbody>    
  21. </table>      
  22. </div>    
  23.   
  24. <script type="text/javascript">    
  25.    $(document).ready(function () { //execute ajax after html elements have been rendered    
  26.       var urlRequest = "/Home/GetListInfo" //url with the controller's name and the jsonRequest function    
  27.       $.get(urlRequest, function (data) { // do ajax getrequest    
  28.          var rows = '';      
  29.          $.each(data, function (index, item) { //build tbody content using each function    
  30.             rows += "<tr>";    
  31.             rows += "<td>" + item.Name + "</td>";    
  32.             rows += "<td>" + item.LastName + "</td>";    
  33.             rows += "<td>" + item.Address + "</td>";    
  34.             rows += "</tr>";    
  35.          });     
  36.          $('.InfoTBody').html(rows); //append all content inside table's tbody (using class selector)    
  37.       }).done(function () { //done is being executed at the very end of the ajax process    
  38.          $('#TblInfo').DataTable(); //We need to call datatable function after the process to build the table's body has finished.    
  39.       })    
  40.   })    
  41. </script>  
Important Note
It is very important to check the definition of your table. In order to make datatable plugin work your table should have a thead 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,
 
Use DataTable.js In MVC View
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,
 
Use DataTable.js In MVC View
Also if the list has many records, the table's paginator will automatically be increased to allow users to change pages of the table,
Use DataTable.js In MVC View
To test that, you can add more items in the jsonResult function inside Homecontroller, add more than 10 items to test the paginator,
 
Use DataTable.js In MVC View
 
And that’s it, I hope this helps you to understand the basic usage of datatables plugin.