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:

 

 

Populate HTML Table using JQUERY

Populate HTML Table using JQUERY
A simple way to populate HTML table using JQuery

Populate HTML table using JQuery – Working in ASP.NET MVC is sometimes tricky especially if you are creating a single page application. Or if you want to optimize your system to perform much faster way in loading a bunch of data. One of the common problems we encountered is to load a list or any data to  HTML view from the controller to its view. One way to solve this is to use the default model list binding of ASP.NET MVC. But in this article, I would like to share with you a way to implement this using JQuery(Ajax request).

I assume you have a new project in visual studio 2013 or any version should do. If you have created a project with default ASP.NET MVC template HomeController will be the default controller and your view is found inside View >  Home > index.cshtml. 

Copy the code below in your index.cshtml and we should be set. Try running your project by pressing f5 and you can now see how this works.

Html Table:

Thank you for reading !!

Happy coding!!

Javascript Date Method- (MM/dd/yyyy)

Javascript date method

Javascript date methodJavascript Date Method has its own behavior in getting the date. One of the working tricks would be to separate date, month and year and concatenate it into one single string by then you can have full control of what specific format you want to achieve.

 

For ASP.NET MVC topic, you can visit ASP.NET MVC Development.

 

 

 

Javascript Date Method – Date Tricks

Below is a sample Javascript trick.

Note:

  • getMonth() -> January = 0; February = 1 ,March = 2 .
  • getDate() -> Get the day of a date
  • getFullYear() -> Get the year of a date (2017)

Output:

“11/11/2017”

Hope this helps. Thank you for reading! Happy COding!!