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

JQuery Plugin

Jquery DataTable is a JQuery plugin that converts or transforms an ordinary HTML table into an enhanced table and adds advanced 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 an MVC project, visit this link. Create a simple ASP.NET MVC Application. And if you are not familiar with its file structure, you might 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
<table class="table table-bordered" id="sampleTable">
       <thead>
           <tr>
               <th>SAMPLE 1</th>
               <th>SAMPLE 2</th>
               <th>SAMPLE 3</th>
               <th>SAMPLE 4</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td class="main_table1"><a onclick="load_child_table(1)"><img id='main_table1' src='../images/arrowupfinal.png' width='10' height='10' /></a> SAMPLE 1</td>
               <td>SAMPLE 2</td>
               <td>SAMPLE 3</td>
               <td>SAMPLE 4</td>
           </tr>
           <tr>
               <td class="main_table2"><a onclick="load_child_table(2)"><img id='main_table2' src='../images/arrowupfinal.png' width='10' height='10' /></a> SAMPLE 2</td>
               <td>SAMPLE 3</td>
               <td>SAMPLE 4</td>
               <td>SAMPLE 5</td>
           </tr>
           <tr>
               <td class="main_table3"><a onclick="load_child_table(3)"><img id='main_table3' src='../images/arrowupfinal.png' width='10' height='10' /></a> SAMPLE 3</td>
               <td>SAMPLE 4</td>
               <td>SAMPLE 5</td>
               <td>SAMPLE 6</td>
           </tr>
       </tbody>
   </table>

Second, create a JavaScript function use for DataTable conversion

Note: To use Jquery Datatable declare the script below

  • <script src=”https://www.freecodespot.com/app/litespeed/localres/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>
//function to convert simple table to Datatable
  function jq_Datatable(table_ID) {
      var table = "#" + table_ID;
 
      check_table(table);
 
      var table = $("#" + table_ID).DataTable();
 
  }
 
  //check if Datatable already exist for dynamic table and remove if it exist
  function check_table(table) {
 
      var currTable = $(table);
      if (currTable) {
          $(".dataTables_filter").remove();
          $(".dataTables_length").remove();
          $(".dataTables_info").remove();
          $(".dataTables_paginate").remove();
          $(".paging_simple_numbers").remove();
          // contains the dataTables master records
          var s = $(document).dataTableSettings;
          if (s != 'undefined') {
              var len = s.length;
 
              for (var i = 0; i < len; i++) {
                  // if already exists, remove from the array
                  if (s[i].sInstance = $(table)) {
                      s.splice(i, 1);
                  }
              }
 
          }
      }
  }
 
  //load child table
  function load_child_table(No) {
      ////Set img for toogle add and minus
      var src = $("#main_table" + No).attr('src');
      var src_add = '../images/arrowdown.png';
      var src_minus = '../images/arrowupfinal.png';
 
 
      if (src == src_add) {
          $("#main_table" + No).attr('src', src_minus);
 
      } else if (src == src_minus) {
          $("#main_table" + No).attr('src', src_add);
      }
      //end of toggle
 
 
      var tr = $(".main_table" + No).closest('tr');
      var table = $('#sampleTable').DataTable();
      var row = table.row(tr);
 
      if (row.child.isShown()) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
      }
      else {
          row.child(child_Table).show();
          tr.addClass('shown');
          $('div.slider', row.child()).slideDown(20000);
      }
  }

Third, design your child table in a script

//child table design
 function child_Table() {
     var result = "";
     result += "<div class='slider'>";
     result += "  <table class='table table-bordered'> ";
     result += "  <thead>                                               ";
     result += "    <tr>                                                ";
     result += "        <th>SAMPLE 1</th>                               ";
     result += "        <th>sAMPLE 2</th>                               ";
     result += "        <th>SAMPLE 3</th>                               ";
     result += "        <th>SAMPLE 4</th>                               ";
     result += "    </tr>                                               ";
     result += "  </thead>                                              ";
     result += " <tbody>                                                ";
     result += "    <tr>                                                ";
     result += "        <td>SAMPLE 1</td>                               ";
     result += "        <td>SAMPLE 2</td>                               ";
     result += "        <td>SAMPLE 3</td>                               ";
     result += "        <td>SAMPLE 4</td>                               ";
     result += "    </tr>                                               ";
     result += "</tbody>                                                ";
     result += "</table>                                                ";
     result += "</div>";
     return result;
 }

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

$(document).ready(function () {
    $.noConflict(); 
 
    //call function for conversion of table when document is ready 
    jq_Datatable("sampleTable");
});

Lastly, you can run your project by pressing F5 from your keyboard or 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:
@{
    ViewBag.Title = "Home Page";
}
<br />
<div>
    <table class="table table-bordered" id="sampleTable">
        <thead>
            <tr>
                <th>SAMPLE 1</th>
                <th>SAMPLE 2</th>
                <th>SAMPLE 3</th>
                <th>SAMPLE 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="main_table1"><a onclick="load_child_table(1)"><img id='main_table1' src='../images/arrowupfinal.png' width='10' height='10' /></a> SAMPLE 1</td>
                <td>SAMPLE 2</td>
                <td>SAMPLE 3</td>
                <td>SAMPLE 4</td>
            </tr>
            <tr>
                <td class="main_table2"><a onclick="load_child_table(2)"><img id='main_table2' src='../images/arrowupfinal.png' width='10' height='10' /></a> SAMPLE 2</td>
                <td>SAMPLE 3</td>
                <td>SAMPLE 4</td>
                <td>SAMPLE 5</td>
            </tr>
            <tr>
                <td class="main_table3"><a onclick="load_child_table(3)"><img id='main_table3' src='../images/arrowupfinal.png' width='10' height='10' /></a> SAMPLE 3</td>
                <td>SAMPLE 4</td>
                <td>SAMPLE 5</td>
                <td>SAMPLE 6</td>
            </tr>
        </tbody>
    </table>
</div>
 
<script src="https://www.freecodespot.com/app/litespeed/localres/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>
 
 
<script>
    $(document).ready(function () {
        $.noConflict(); 
 
        //call function for conversion of table when document is ready 
        jq_Datatable("sampleTable");
    });
 
 
 
 
    //function to convert simple table to Datatable
    function jq_Datatable(table_ID) {
        var table = "#" + table_ID;
 
        check_table(table);
 
        var table = $("#" + table_ID).DataTable();
 
    }
 
    //check if Datatable already exist for dynamic table and remove if it exist
    function check_table(table) {
 
        var currTable = $(table);
        if (currTable) {
            $(".dataTables_filter").remove();
            $(".dataTables_length").remove();
            $(".dataTables_info").remove();
            $(".dataTables_paginate").remove();
            $(".paging_simple_numbers").remove();
            // contains the dataTables master records
            var s = $(document).dataTableSettings;
            if (s != 'undefined') {
                var len = s.length;
 
                for (var i = 0; i < len; i++) {
                    // if already exists, remove from the array
                    if (s[i].sInstance = $(table)) {
                        s.splice(i, 1);
                    }
                }
 
            }
        }
    }
 
    //load child table
    function load_child_table(No) {
        ////Set img for toogle add and minus
        var src = $("#main_table" + No).attr('src');
        var src_add = '../images/arrowdown.png';
        var src_minus = '../images/arrowupfinal.png';
 
 
        if (src == src_add) {
            $("#main_table" + No).attr('src', src_minus);
 
        } else if (src == src_minus) {
            $("#main_table" + No).attr('src', src_add);
        }
        //end of toggle
 
 
        var tr = $(".main_table" + No).closest('tr');
        var table = $('#sampleTable').DataTable();
        var row = table.row(tr);
 
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            row.child(child_Table).show();
            tr.addClass('shown');
            $('div.slider', row.child()).slideDown(20000);
        }
    }
 
    //child table design
    function child_Table() {
        var result = "";
        result += "<div class='slider'>";
        result += "  <table class='table table-bordered'> ";
        result += "  <thead>                                               ";
        result += "    <tr>                                                ";
        result += "        <th>SAMPLE 1</th>                               ";
        result += "        <th>sAMPLE 2</th>                               ";
        result += "        <th>SAMPLE 3</th>                               ";
        result += "        <th>SAMPLE 4</th>                               ";
        result += "    </tr>                                               ";
        result += "  </thead>                                              ";
        result += " <tbody>                                                ";
        result += "    <tr>                                                ";
        result += "        <td>SAMPLE 1</td>                               ";
        result += "        <td>SAMPLE 2</td>                               ";
        result += "        <td>SAMPLE 3</td>                               ";
        result += "        <td>SAMPLE 4</td>                               ";
        result += "    </tr>                                               ";
        result += "</tbody>                                                ";
        result += "</table>                                                ";
        result += "</div>";
        return result;
    }
</script>

Leave a Comment

%d bloggers like this: