JQuery Plugin – DataTable with child Table(ASP.NET MVC)

JQuery Plugin

Jquery DataTable is a JQuery plugin that converts or transforms ordinary HTML table into an enhanced table and adds advance interaction controls like table sorting, filtering, and pagination.

Visit this link for Jquery DataTable documentation.

In this thread, we will use Jquery DataTable to create a simple table with child rows.

Note:

  • I am using Visual Studio 2013
  • I’m using the default controller for MVC template which is HomeController and it’s view index.cshtml located at Views-Home folder in your solution explorer. 

To start, create a new ASP.NET MVC Web Application. If this is your first time creating a project in MVC visit this link How to start ASP.NET MVC Application. And if you are not familiar with its file structure you might as well read this thread ASP.NET MVC file structure.

I assume you have already created a project. From your solution explorer navigate to Views->Home and open file index.cshtml.

First, construct your table.

Note:

  • load_child_table() – > JavaScript function that load child row.
  • main_table -> unique class use to determine the closest tr from the selected td

Second, create a JavaScript function use for DataTable conversion

Note: To use Jquery Datatable declare the script below

  • <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
  • <link rel=”Stylesheet” href=”https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css” />
  • <script type=”text/javascript” src=”https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js”></script>

Third, design your child table in a script

Fourth, create a document.ready function to load our function when our form is ready.

Lastly, you can run your project by pressing F5 from your keyboard or by pressing Ctrl + F5 if to run the project without debugging mode.

Project output:

JQuery Plugin

Main table

      Table with child row

JQuery Plugin

Table with child row

 

Thank you for reading!!

Happy coding !!!

Below is the code summary for my index file.

Code Summary:

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *