2778 Views
5 minutes read
Categories
Office 365 SharePoint

jQuery Data Table with Both Row and Column Selections

Data Tables is a plug-in for the jQuery JavaScript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and adds advanced interaction controls to any HTML table. Many a time it is required to select both row and column data for calculations in matrix tables. In those scenarios we can use this approach.

Method of creating jQuery Data tables with both row and column selections:

  • Create a sample ASP.Net App:
    • To create a sample application, open Visual Studio (I used Visual studio 2017) and create a sample project for an asp.net application.
    • Add a page named DataTable.aspx to your solution.
  • Download all css, js files required for the sample App:
    • You need to download all the files mentioned below in the next section for jQuery data table.
    • Place all downloaded js files in script folder.
    • Place all downloaded css files in Contents folder.
  • Add reference of plug-in files in the sample App:
    • To DataTable.aspx register all the files shown below:
<script src="Scripts/jquery-1.10.2.min.js"></script>
    	<script src="Scripts/bootstrap.min.js"></script>
    	<link href="Content/bootstrap.min.css" rel="stylesheet" />
   	<link href="Content/font-awesome.min.css" rel="stylesheet" />    
<link href="Content/bootstrap-grid.min.css" rel="stylesheet" />
    	<script src="Content/jquery.dataTables.min.js"></script>
    	<script src="Content/dataTables.bootstrap4.min.js"></script>
    	<link href="Content/dataTables.bootstrap4.min.css" rel="stylesheet" />
    	<link href="Content/select.bootstrap.min.css" rel="stylesheet" />
<script src="Content/dataTables.select.min.js"></script>
  • Add a custom js file to script folder and register that in your aspx page shown below after the previous registrations:
<script src="Scripts/DataTableCustom.js"></script>
  • Add html table to the sample App:
    • Add a simple html table to the body in your aspx page. You can populate the table with server-side dynamic data based on requirement. Here I have used static data.
<style> .back{
    background-color:#fafafa;
}

    </style>

<table id="exampleData" class="table table-bordered table-hoverNA table-stripedNA dtCustom” >
        <thead>
            <tr class="back">
                <th></th>
               <th ><i data-id="sd1" class="fa fa-square-o fa-lg" aria-hidden="true" onclick="javascript:Check('sd1')"></i></th>
                <th><i data-id="sd2" class="fa fa-square-o fa-lg" aria-hidden="true" onclick="javascript:Check('sd2')"></i></th>
                <th><i data-id="sd3" class="fa fa-square-o fa-lg" aria-hidden="true" onclick="javascript:Check('sd3')"></i></th>
                <th><i data-id="sd4" class="fa fa-square-o fa-lg" aria-hidden="true" onclick="javascript:Check('sd4')"></i></th>
                <th><i data-id="sd5" class="fa fa-square-o fa-lg" aria-hidden="true" onclick="javascript:Check('sd5')"></i></th>
            </tr>
          
        </thead>
        <tbody>
            <tr>
                <td class="back"></td>
                <td>2</td>
                <td>2</td>
                <td>4</td>
                <td>3</td>
                <td>5</td>
            </tr>
            <tr>
                <td class="back"></td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td>8</td>
                <td>2</td>
            </tr>
            <tr>
                <td class="back"></td>
                <td>1</td>
                <td>1</td>
                <td>4</td>
                <td>6</td>
                <td>1</td>
            </tr>
            <tr>
                <td class="back"></td>
                <td>1</td>
                <td>1</td>
                <td>6</td>
                <td>3</td>
                <td>7</td>
            </tr>
           </tbody></table>
  • Add code in custom js file to render the jQuery Data table:
    • In DataTableCustom.js file registered above add the following code to render the html table as jquery data table.
var egTable;
$(document).ready(function () {
egTable = $('#exampleData').DataTable({
        "bSort": false,
        columnDefs: [{
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        }],
        select: {
            style: 'multi',
            selector: 'td:first-child'
        }
    });
});
function Check(title) {
    var id = title.substr(title.length - 1);
    if ($("[data-id='" + title + "']").hasClass('fa-square-o')) {
        $("[data-id='" + title + "']").removeClass('fa-square-o').addClass('fa-check-square-o');
        egTable.columns(id).select();
    }
    else {
        $("[data-id='" + title + "']").removeClass('fa-check-square-o').addClass('fa-square-o');
        egTable.columns(1).deselect();
    }
}
  • The data table is prepared in document ready.
  • The row selection feature is added from columnDefs specified above.
  • The Check function is there for column selection functionality.
  • Set DataTable.aspx as start page and run the application. The output will be as shown:
  • jQuery Data Table with both Row and Column Selections
  • When you select rows and columns then output is as follows:
  • jQuery Data Table with both Row and Column Selections

The above example depicts count of products sold in a matrix format. Where the x axis depicts months and y axis depicts different kinds of products.

Conclusion:

This kind of jQuery data table can be used in applications which need have some matrices. It can be ideally used in ALM (Application Lifecycle Management) systems to depict traceability matrix, resource matrix, integration matrix etc.

Debopoma Chaudhury

About Debopoma Chaudhury

Debopoma has around 8+ years of experience in Software Development. She has expertise in Estimation, Analysis, Design, Development and Testing using C#, Ext.JS, Angular JS, Bootstrap, jQuery and SQL. Also, she has exposure on Microsoft technologies using AJAX, Telerik Controls, Web Application in Visual Studio 2008, ASP.Net 4.0, Bryntum Gantt and hold proficiency in Regression Analysis, Agile Methodology, Test Execution and Test Documentation.

Debopoma did her Graduation in B.Tech (Computer Science Engineering ) from St. Thomas College in 2008 and was the Gold Medalist in her University WBUT.

Prior to joining Netwoven, she was working with Infosys and Kovair Pvt. Ltd, Kolkata as Team Lead.

A native of West Bengal, she is presently living in Kolkata with her spouse. During her leisure time, she loves singing, writing short stories and travelling.

LinkedinTwitterFacebook

Leave a Reply

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