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:

 

 

Wait for Visual Studio to finish creating the application, then create a new class with the name Person under 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 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 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,

 

 

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

@*Import Jquery and datatable 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 jsonRequest function
      $.get(urlRequest, function (data) { // do ajax getrequest
         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 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,

 

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