How to show / hide columns dynamically using checkbox

Question

I created a table using dataTables which can sort itself.
I want to have checkboxes for each column, which when active shows the column and hides otherwise. If anyone knows how to do it, please help me.
The code in codepena

  var dataset = [
    { "sno": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {"sno": "1",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {"sno": "1",
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "extn": "1562"
    },
    {"sno": "1",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {"sno": "1",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {"sno": "1",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    },
    {"sno": "1",
      "name": "Herrod Chandler",
      "position": "Sales Assistant",
      "salary": "$137,500",
      "start_date": "2012/08/06",
      "office": "San Francisco",
      "extn": "9608"
    },
    {"sno": "1",
      "name": "Rhona Davidson",
      "position": "Integration Specialist",
      "salary": "$327,900",
      "start_date": "2010/10/14",
      "office": "Tokyo",
      "extn": "6200"
    },
    {"sno": "1",
      "name": "Colleen Hurst",
      "position": "Javascript Developer",
      "salary": "$205,500",
      "start_date": "2009/09/15",
      "office": "San Francisco",
      "extn": "2360"
    },
    {"sno": "1",
      "name": "Sonya Frost",
      "position": "Software Engineer",
      "salary": "$103,600",
      "start_date": "2008/12/13",
      "office": "Edinburgh",
      "extn": "1667"
    },
    {"sno": "1",
      "name": "Jena Gaines",
      "position": "Office Manager",
      "salary": "$90,560",
      "start_date": "2008/12/19",
      "office": "London",
      "extn": "3814"
    },
    {"sno": "1",
      "name": "Quinn Flynn",
      "position": "Support Lead",
      "salary": "$342,000",
      "start_date": "2013/03/03",
      "office": "Edinburgh",
      "extn": "9497"
    },
    {"sno": "1",
      "name": "Charde Marshall",
      "position": "Regional Director",
      "salary": "$470,600",
      "start_date": "2008/10/16",
      "office": "San Francisco",
      "extn": "6741"
    },
    {"sno": "1",
      "name": "Haley Kennedy",
      "position": "Senior Marketing Designer",
      "salary": "$313,500",
      "start_date": "2012/12/18",
      "office": "London",
      "extn": "3597"
    },
    {"sno": "1",
      "name": "Tatyana Fitzpatrick",
      "position": "Regional Director",
      "salary": "$385,750",
      "start_date": "2010/03/17",
      "office": "London",
      "extn": "1965"
    },
    {"sno": "1",
      "name": "Michael Silva",
      "position": "Marketing Designer",
      "salary": "$198,500",
      "start_date": "2012/11/27",
      "office": "London",
      "extn": "1581"
    },
    {"sno": "1",
      "name": "Paul Byrd",
      "position": "Chief Financial Officer (CFO)",
      "salary": "$725,000",
      "start_date": "2010/06/09",
      "office": "New York",
      "extn": "3059"
    },
    {"sno": "1",
      "name": "Gloria Little",
      "position": "Systems Administrator",
      "salary": "$237,500",
      "start_date": "2009/04/10",
      "office": "New York",
      "extn": "1721"
    },
    {"sno": "1",
      "name": "Bradley Greer",
      "position": "Software Engineer",
      "salary": "$132,000",
      "start_date": "2012/10/13",
      "office": "London",
      "extn": "2558"
    },
    {"sno": "1",
      "name": "Dai Rios",
      "position": "Personnel Lead",
      "salary": "$217,500",
      "start_date": "2012/09/26",
      "office": "Edinburgh",
      "extn": "2290"
    },
    {"sno": "1",
      "name": "Jenette Caldwell",
      "position": "Development Lead",
      "salary": "$345,000",
      "start_date": "2011/09/03",
      "office": "New York",
      "extn": "1937"
    },
    {"sno": "1",
      "name": "Yuri Berry",
      "position": "Chief Marketing Officer (CMO)",
      "salary": "$675,000",
      "start_date": "2009/06/25",
      "office": "New York",
      "extn": "6154"
    },
    {"sno": "1",
      "name": "Caesar Vance",
      "position": "Pre-Sales Support",
      "salary": "$106,450",
      "start_date": "2011/12/12",
      "office": "New York",
      "extn": "8330"
    },
    {"sno": "1",
      "name": "Doris Wilder",
      "position": "Sales Assistant",
      "salary": "$85,600",
      "start_date": "2010/09/20",
      "office": "Sidney",
      "extn": "3023"
    },
    {"sno": "1",
      "name": "Angelica Ramos",
      "position": "Chief Executive Officer (CEO)",
      "salary": "$1,200,000",
      "start_date": "2009/10/09",
      "office": "London",
      "extn": "5797"
    },
    {"sno": "1",
      "name": "Gavin Joyce",
      "position": "Developer",
      "salary": "$92,575",
      "start_date": "2010/12/22",
      "office": "Edinburgh",
      "extn": "8822"
    },
    {"sno": "1",
      "name": "Jennifer Chang",
      "position": "Regional Director",
      "salary": "$357,650",
      "start_date": "2010/11/14",
      "office": "Singapore",
      "extn": "9239"
    },
    {"sno": "1",
      "name": "Brenden Wagner",
      "position": "Software Engineer",
      "salary": "$206,850",
      "start_date": "2011/06/07",
      "office": "San Francisco",
      "extn": "1314"
    },
    {"sno": "1",
      "name": "Fiona Green",
      "position": "Chief Operating Officer (COO)",
      "salary": "$850,000",
      "start_date": "2010/03/11",
      "office": "San Francisco",
      "extn": "2947"
    },
    {"sno": "1",
      "name": "Shou Itou",
      "position": "Regional Marketing",
      "salary": "$163,000",
      "start_date": "2011/08/14",
      "office": "Tokyo",
      "extn": "8899"
    },
    {"sno": "1",
      "name": "Michelle House",
      "position": "Integration Specialist",
      "salary": "$95,400",
      "start_date": "2011/06/02",
      "office": "Sidney",
      "extn": "2769"
    },
    {"sno": "1",
      "name": "Suki Burks",
      "position": "Developer",
      "salary": "$114,500",
      "start_date": "2009/10/22",
      "office": "London",
      "extn": "6832"
    },
    {"sno": "1",
      "name": "Prescott Bartlett",
      "position": "Technical Author",
      "salary": "$145,000",
      "start_date": "2011/05/07",
      "office": "London",
      "extn": "3606"
    },
    {"sno": "1",
      "name": "Gavin Cortez",
      "position": "Team Leader",
      "salary": "$235,500",
      "start_date": "2008/10/26",
      "office": "San Francisco",
      "extn": "2860"
    },
    {"sno": "1",
      "name": "Martena Mccray",
      "position": "Post-Sales support",
      "salary": "$324,050",
      "start_date": "2011/03/09",
      "office": "Edinburgh",
      "extn": "8240"
    },
    {"sno": "1",
      "name": "Unity Butler",
      "position": "Marketing Designer",
      "salary": "$85,675",
      "start_date": "2009/12/09",
      "office": "San Francisco",
      "extn": "5384"
    },
    {"sno": "1",
      "name": "Howard Hatfield",
      "position": "Office Manager",
      "salary": "$164,500",
      "start_date": "2008/12/16",
      "office": "San Francisco",
      "extn": "7031"
    },
    {"sno": "1",
      "name": "Hope Fuentes",
      "position": "Secretary",
      "salary": "$109,850",
      "start_date": "2010/02/12",
      "office": "San Francisco",
      "extn": "6318"
    },
    {"sno": "1",
      "name": "Vivian Harrell",
      "position": "Financial Controller",
      "salary": "$452,500",
      "start_date": "2009/02/14",
      "office": "San Francisco",
      "extn": "9422"
    },
    {"sno": "1",
      "name": "Timothy Mooney",
      "position": "Office Manager",
      "salary": "$136,200",
      "start_date": "2008/12/11",
      "office": "London",
      "extn": "7580"
    },
    {"sno": "1",
      "name": "Jackson Bradshaw",
      "position": "Director",
      "salary": "$645,750",
      "start_date": "2008/09/26",
      "office": "New York",
      "extn": "1042"
    },
    {"sno": "1",
      "name": "Olivia Liang",
      "position": "Support Engineer",
      "salary": "$234,500",
      "start_date": "2011/02/03",
      "office": "Singapore",
      "extn": "2120"
    },
    {"sno": "1",
      "name": "Bruno Nash",
      "position": "Software Engineer",
      "salary": "$163,500",
      "start_date": "2011/05/03",
      "office": "London",
      "extn": "6222"
    },
    {"sno": "1",
      "name": "Sakura Yamamoto",
      "position": "Support Engineer",
      "salary": "$139,575",
      "start_date": "2009/08/19",
      "office": "Tokyo",
      "extn": "9383"
    },
    {"sno": "1",
      "name": "Thor Walton",
      "position": "Developer",
      "salary": "$98,540",
      "start_date": "2013/08/11",
      "office": "New York",
      "extn": "8327"
    },
    {"sno": "1",
      "name": "Finn Camacho",
      "position": "Support Engineer",
      "salary": "$87,500",
      "start_date": "2009/07/07",
      "office": "San Francisco",
      "extn": "2927"
    },
    {"sno": "1",
      "name": "Serge Baldwin",
      "position": "Data Coordinator",
      "salary": "$138,575",
      "start_date": "2012/04/09",
      "office": "Singapore",
      "extn": "8352"
    },
    {"sno": "1",
      "name": "Zenaida Frank",
      "position": "Software Engineer",
      "salary": "$125,250",
      "start_date": "2010/01/04",
      "office": "New York",
      "extn": "7439"
    },
    {"sno": "1",
      "name": "Zorita Serrano",
      "position": "Software Engineer",
      "salary": "$115,000",
      "start_date": "2012/06/01",
      "office": "San Francisco",
      "extn": "4389"
    },
    {"sno": "1",
      "name": "Jennifer Acosta",
      "position": "Junior Javascript Developer",
      "salary": "$75,650",
      "start_date": "2013/02/01",
      "office": "Edinburgh",
      "extn": "3431"
    },
    {"sno": "1",
      "name": "Cara Stevens",
      "position": "Sales Assistant",
      "salary": "$145,600",
      "start_date": "2011/12/06",
      "office": "New York",
      "extn": "3990"
    },
    {"sno": "1",
      "name": "Hermione Butler",
      "position": "Regional Director",
      "salary": "$356,250",
      "start_date": "2011/03/21",
      "office": "London",
      "extn": "1016"
    },
    {"sno": "1",
      "name": "Lael Greer",
      "position": "Systems Administrator",
      "salary": "$103,500",
      "start_date": "2009/02/27",
      "office": "London",
      "extn": "6733"
    },
    {"sno": "1",
      "name": "Jonas Alexander",
      "position": "Developer",
      "salary": "$86,500",
      "start_date": "2010/07/14",
      "office": "San Francisco",
      "extn": "8196"
    },
    {"sno": "1",
      "name": "Shad Decker",
      "position": "Regional Director",
      "salary": "$183,000",
      "start_date": "2008/11/13",
      "office": "Edinburgh",
      "extn": "6373"
    },
    {"sno": "1",
      "name": "Michael Bruce",
      "position": "Javascript Developer",
      "salary": "$183,000",
      "start_date": "2011/06/27",
      "office": "Singapore",
      "extn": "5384"
    },
    {"sno": "1",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    }
  ]





 
/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table class="chil" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;border-bottom:none;">'+
        '<tr>'+
            '<td style="text-align:left;padding-left:100px;border-bottom:none;"><b>CONTACT PERSON  :</b>    '+d.name+'</td>'+
            '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>EMAIL :</b>  asdfasdfasfasasdf</td>'+
            
        '</tr>'+
         '<tr>'+
            '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>CONTACT NUMBER  :</b>    987654321</td>'+
            '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>WEBSITE :</b>  asdfasdfasfasasdf</td>'+
            
        '</tr>'+ 
        '<tr>'+
            '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>REFERRED BY  :</b>    '+d.extn+'</td>'+
            '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>ADDRESS  :</b>    asdfasdfasdfasdf</td>'+
                        
        '</tr>'+ 
        '<tr>'+
            '<td style="text-align:left;border-bottom:none;padding-left:100px; "><b>COMMENTS  : </b>   '+d.extn+'</td>'+
            '<td style="text-align:left;border-bottom:none;padding-left:50px; "></td>'+            
        '</tr>'+ 
    '</table>';
}
 
$(document).ready(function() {
    var table = $('#example').DataTable( {
      "scrollY":        "68vh",
        "scrollCollapse": true,
		"searching": false,
        "paging":         false,
        data: dataset,
        "columns": [
                      { "data": "sno" },          
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" },
             {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

      $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
 
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
 
        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

tr{
  text-align:center;
}
a {
    cursor: pointer;
    color: #3174c7;
    text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<div>
					Toggle column: <a class="toggle-vis" data-column="1">Name</a> - <a class="toggle-vis" data-column="2">Position</a> - <a class="toggle-vis" data-column=
					"3">Office</a>  - <a class="toggle-vis" data-column=
					"4">Salary</a>
				</div>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th style="border-top-left-radius:10px;border-bottom-left-radius:10px;">S.No.</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
                <th style="border-top-right-radius:10px;border-bottom-right-radius:10px;">View</th>
            </tr>
        </thead>
        
    </table>

<div class="list_view">
        <h3 style="margin-left:50px; position:absolute;">View in the list </h3>
        <input type="checkbox" name="list" value="Name" checked style="color:white; margin-left: 90px; margin-top:55px;"> Name<br>
  <input type="checkbox" name="list" value="Services" checked style="margin-left: 90px;"> Position<br>
  <input type="checkbox" name="list" value="City" checked style="margin-left: 90px;"> Office<br>
<input type="checkbox" name="list" value="Categories" checked style="margin-left: 90px;"> Salary<br>
            </div>

At the side of the table, separate div. Trying to make the function work, It works for normal buttons as shown in the codepen. Need help on implementing it for checkbox — R. Mani Selvam
– R. Mani Selvam, Commented Jun 8, 2017 at 8:33

Mihai T · Accepted Answer · 2017-06-08 08:42:27Z

you need to use the on change event and connect the checkboxes with the columns using a data atribute ( in this case i used data-target ) .

see snippet below

code for JQ :

$('.list_view input[type="checkbox"]').on('change', function(e) {


    // Get the column API object
    var col = table.column($(this).attr('data-target'));

    // Toggle the visibility
    col.visible(!col.visible());
});

var dataset = [{
  "sno": "1",
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "$320,800",
  "start_date": "2011/04/25",
  "office": "Edinburgh",
  "extn": "5421"
}, {
  "sno": "1",
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "$170,750",
  "start_date": "2011/07/25",
  "office": "Tokyo",
  "extn": "8422"
}, {
  "sno": "1",
  "name": "Ashton Cox",
  "position": "Junior Technical Author",
  "salary": "$86,000",
  "start_date": "2009/01/12",
  "office": "San Francisco",
  "extn": "1562"
}, {
  "sno": "1",
  "name": "Cedric Kelly",
  "position": "Senior Javascript Developer",
  "salary": "$433,060",
  "start_date": "2012/03/29",
  "office": "Edinburgh",
  "extn": "6224"
}, {
  "sno": "1",
  "name": "Airi Satou",
  "position": "Accountant",
  "salary": "$162,700",
  "start_date": "2008/11/28",
  "office": "Tokyo",
  "extn": "5407"
}, {
  "sno": "1",
  "name": "Brielle Williamson",
  "position": "Integration Specialist",
  "salary": "$372,000",
  "start_date": "2012/12/02",
  "office": "New York",
  "extn": "4804"
}, {
  "sno": "1",
  "name": "Herrod Chandler",
  "position": "Sales Assistant",
  "salary": "$137,500",
  "start_date": "2012/08/06",
  "office": "San Francisco",
  "extn": "9608"
}, {
  "sno": "1",
  "name": "Rhona Davidson",
  "position": "Integration Specialist",
  "salary": "$327,900",
  "start_date": "2010/10/14",
  "office": "Tokyo",
  "extn": "6200"
}, {
  "sno": "1",
  "name": "Colleen Hurst",
  "position": "Javascript Developer",
  "salary": "$205,500",
  "start_date": "2009/09/15",
  "office": "San Francisco",
  "extn": "2360"
}, {
  "sno": "1",
  "name": "Sonya Frost",
  "position": "Software Engineer",
  "salary": "$103,600",
  "start_date": "2008/12/13",
  "office": "Edinburgh",
  "extn": "1667"
}, {
  "sno": "1",
  "name": "Jena Gaines",
  "position": "Office Manager",
  "salary": "$90,560",
  "start_date": "2008/12/19",
  "office": "London",
  "extn": "3814"
}, {
  "sno": "1",
  "name": "Quinn Flynn",
  "position": "Support Lead",
  "salary": "$342,000",
  "start_date": "2013/03/03",
  "office": "Edinburgh",
  "extn": "9497"
}, {
  "sno": "1",
  "name": "Charde Marshall",
  "position": "Regional Director",
  "salary": "$470,600",
  "start_date": "2008/10/16",
  "office": "San Francisco",
  "extn": "6741"
}, {
  "sno": "1",
  "name": "Haley Kennedy",
  "position": "Senior Marketing Designer",
  "salary": "$313,500",
  "start_date": "2012/12/18",
  "office": "London",
  "extn": "3597"
}, {
  "sno": "1",
  "name": "Tatyana Fitzpatrick",
  "position": "Regional Director",
  "salary": "$385,750",
  "start_date": "2010/03/17",
  "office": "London",
  "extn": "1965"
}, {
  "sno": "1",
  "name": "Michael Silva",
  "position": "Marketing Designer",
  "salary": "$198,500",
  "start_date": "2012/11/27",
  "office": "London",
  "extn": "1581"
}, {
  "sno": "1",
  "name": "Paul Byrd",
  "position": "Chief Financial Officer (CFO)",
  "salary": "$725,000",
  "start_date": "2010/06/09",
  "office": "New York",
  "extn": "3059"
}, {
  "sno": "1",
  "name": "Gloria Little",
  "position": "Systems Administrator",
  "salary": "$237,500",
  "start_date": "2009/04/10",
  "office": "New York",
  "extn": "1721"
}, {
  "sno": "1",
  "name": "Bradley Greer",
  "position": "Software Engineer",
  "salary": "$132,000",
  "start_date": "2012/10/13",
  "office": "London",
  "extn": "2558"
}, {
  "sno": "1",
  "name": "Dai Rios",
  "position": "Personnel Lead",
  "salary": "$217,500",
  "start_date": "2012/09/26",
  "office": "Edinburgh",
  "extn": "2290"
}, {
  "sno": "1",
  "name": "Jenette Caldwell",
  "position": "Development Lead",
  "salary": "$345,000",
  "start_date": "2011/09/03",
  "office": "New York",
  "extn": "1937"
}, {
  "sno": "1",
  "name": "Yuri Berry",
  "position": "Chief Marketing Officer (CMO)",
  "salary": "$675,000",
  "start_date": "2009/06/25",
  "office": "New York",
  "extn": "6154"
}, {
  "sno": "1",
  "name": "Caesar Vance",
  "position": "Pre-Sales Support",
  "salary": "$106,450",
  "start_date": "2011/12/12",
  "office": "New York",
  "extn": "8330"
}, {
  "sno": "1",
  "name": "Doris Wilder",
  "position": "Sales Assistant",
  "salary": "$85,600",
  "start_date": "2010/09/20",
  "office": "Sidney",
  "extn": "3023"
}, {
  "sno": "1",
  "name": "Angelica Ramos",
  "position": "Chief Executive Officer (CEO)",
  "salary": "$1,200,000",
  "start_date": "2009/10/09",
  "office": "London",
  "extn": "5797"
}, {
  "sno": "1",
  "name": "Gavin Joyce",
  "position": "Developer",
  "salary": "$92,575",
  "start_date": "2010/12/22",
  "office": "Edinburgh",
  "extn": "8822"
}, {
  "sno": "1",
  "name": "Jennifer Chang",
  "position": "Regional Director",
  "salary": "$357,650",
  "start_date": "2010/11/14",
  "office": "Singapore",
  "extn": "9239"
}, {
  "sno": "1",
  "name": "Brenden Wagner",
  "position": "Software Engineer",
  "salary": "$206,850",
  "start_date": "2011/06/07",
  "office": "San Francisco",
  "extn": "1314"
}, {
  "sno": "1",
  "name": "Fiona Green",
  "position": "Chief Operating Officer (COO)",
  "salary": "$850,000",
  "start_date": "2010/03/11",
  "office": "San Francisco",
  "extn": "2947"
}, {
  "sno": "1",
  "name": "Shou Itou",
  "position": "Regional Marketing",
  "salary": "$163,000",
  "start_date": "2011/08/14",
  "office": "Tokyo",
  "extn": "8899"
}, {
  "sno": "1",
  "name": "Michelle House",
  "position": "Integration Specialist",
  "salary": "$95,400",
  "start_date": "2011/06/02",
  "office": "Sidney",
  "extn": "2769"
}, {
  "sno": "1",
  "name": "Suki Burks",
  "position": "Developer",
  "salary": "$114,500",
  "start_date": "2009/10/22",
  "office": "London",
  "extn": "6832"
}, {
  "sno": "1",
  "name": "Prescott Bartlett",
  "position": "Technical Author",
  "salary": "$145,000",
  "start_date": "2011/05/07",
  "office": "London",
  "extn": "3606"
}, {
  "sno": "1",
  "name": "Gavin Cortez",
  "position": "Team Leader",
  "salary": "$235,500",
  "start_date": "2008/10/26",
  "office": "San Francisco",
  "extn": "2860"
}, {
  "sno": "1",
  "name": "Martena Mccray",
  "position": "Post-Sales support",
  "salary": "$324,050",
  "start_date": "2011/03/09",
  "office": "Edinburgh",
  "extn": "8240"
}, {
  "sno": "1",
  "name": "Unity Butler",
  "position": "Marketing Designer",
  "salary": "$85,675",
  "start_date": "2009/12/09",
  "office": "San Francisco",
  "extn": "5384"
}, {
  "sno": "1",
  "name": "Howard Hatfield",
  "position": "Office Manager",
  "salary": "$164,500",
  "start_date": "2008/12/16",
  "office": "San Francisco",
  "extn": "7031"
}, {
  "sno": "1",
  "name": "Hope Fuentes",
  "position": "Secretary",
  "salary": "$109,850",
  "start_date": "2010/02/12",
  "office": "San Francisco",
  "extn": "6318"
}, {
  "sno": "1",
  "name": "Vivian Harrell",
  "position": "Financial Controller",
  "salary": "$452,500",
  "start_date": "2009/02/14",
  "office": "San Francisco",
  "extn": "9422"
}, {
  "sno": "1",
  "name": "Timothy Mooney",
  "position": "Office Manager",
  "salary": "$136,200",
  "start_date": "2008/12/11",
  "office": "London",
  "extn": "7580"
}, {
  "sno": "1",
  "name": "Jackson Bradshaw",
  "position": "Director",
  "salary": "$645,750",
  "start_date": "2008/09/26",
  "office": "New York",
  "extn": "1042"
}, {
  "sno": "1",
  "name": "Olivia Liang",
  "position": "Support Engineer",
  "salary": "$234,500",
  "start_date": "2011/02/03",
  "office": "Singapore",
  "extn": "2120"
}, {
  "sno": "1",
  "name": "Bruno Nash",
  "position": "Software Engineer",
  "salary": "$163,500",
  "start_date": "2011/05/03",
  "office": "London",
  "extn": "6222"
}, {
  "sno": "1",
  "name": "Sakura Yamamoto",
  "position": "Support Engineer",
  "salary": "$139,575",
  "start_date": "2009/08/19",
  "office": "Tokyo",
  "extn": "9383"
}, {
  "sno": "1",
  "name": "Thor Walton",
  "position": "Developer",
  "salary": "$98,540",
  "start_date": "2013/08/11",
  "office": "New York",
  "extn": "8327"
}, {
  "sno": "1",
  "name": "Finn Camacho",
  "position": "Support Engineer",
  "salary": "$87,500",
  "start_date": "2009/07/07",
  "office": "San Francisco",
  "extn": "2927"
}, {
  "sno": "1",
  "name": "Serge Baldwin",
  "position": "Data Coordinator",
  "salary": "$138,575",
  "start_date": "2012/04/09",
  "office": "Singapore",
  "extn": "8352"
}, {
  "sno": "1",
  "name": "Zenaida Frank",
  "position": "Software Engineer",
  "salary": "$125,250",
  "start_date": "2010/01/04",
  "office": "New York",
  "extn": "7439"
}, {
  "sno": "1",
  "name": "Zorita Serrano",
  "position": "Software Engineer",
  "salary": "$115,000",
  "start_date": "2012/06/01",
  "office": "San Francisco",
  "extn": "4389"
}, {
  "sno": "1",
  "name": "Jennifer Acosta",
  "position": "Junior Javascript Developer",
  "salary": "$75,650",
  "start_date": "2013/02/01",
  "office": "Edinburgh",
  "extn": "3431"
}, {
  "sno": "1",
  "name": "Cara Stevens",
  "position": "Sales Assistant",
  "salary": "$145,600",
  "start_date": "2011/12/06",
  "office": "New York",
  "extn": "3990"
}, {
  "sno": "1",
  "name": "Hermione Butler",
  "position": "Regional Director",
  "salary": "$356,250",
  "start_date": "2011/03/21",
  "office": "London",
  "extn": "1016"
}, {
  "sno": "1",
  "name": "Lael Greer",
  "position": "Systems Administrator",
  "salary": "$103,500",
  "start_date": "2009/02/27",
  "office": "London",
  "extn": "6733"
}, {
  "sno": "1",
  "name": "Jonas Alexander",
  "position": "Developer",
  "salary": "$86,500",
  "start_date": "2010/07/14",
  "office": "San Francisco",
  "extn": "8196"
}, {
  "sno": "1",
  "name": "Shad Decker",
  "position": "Regional Director",
  "salary": "$183,000",
  "start_date": "2008/11/13",
  "office": "Edinburgh",
  "extn": "6373"
}, {
  "sno": "1",
  "name": "Michael Bruce",
  "position": "Javascript Developer",
  "salary": "$183,000",
  "start_date": "2011/06/27",
  "office": "Singapore",
  "extn": "5384"
}, {
  "sno": "1",
  "name": "Donna Snider",
  "position": "Customer Support",
  "salary": "$112,000",
  "start_date": "2011/01/25",
  "office": "New York",
  "extn": "4226"
}]






/* Formatting function for row details - modify as you need */
function format(d) {
  // `d` is the original data object for the row
  return '<table class="chil" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;border-bottom:none;">' +
    '<tr>' +
    '<td style="text-align:left;padding-left:100px;border-bottom:none;"><b>CONTACT PERSON  :</b>    ' + d.name + '</td>' +
    '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>EMAIL :</b>  asdfasdfasfasasdf</td>' +

    '</tr>' +
    '<tr>' +
    '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>CONTACT NUMBER  :</b>    987654321</td>' +
    '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>WEBSITE :</b>  asdfasdfasfasasdf</td>' +

    '</tr>' +
    '<tr>' +
    '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>REFERRED BY  :</b>    ' + d.extn + '</td>' +
    '<td style="text-align:left;border-bottom:none;padding-left:100px;"><b>ADDRESS  :</b>    asdfasdfasdfasdf</td>' +

    '</tr>' +
    '<tr>' +
    '<td style="text-align:left;border-bottom:none;padding-left:100px; "><b>COMMENTS  : </b>   ' + d.extn + '</td>' +
    '<td style="text-align:left;border-bottom:none;padding-left:50px; "></td>' +
    '</tr>' +
    '</table>';
}

$(document).ready(function() {
  var table = $('#example').DataTable({
    "scrollY": "68vh",
    "scrollCollapse": true,
    "searching": false,
    "paging": false,
    data: dataset,
    "columns": [{
      "data": "sno"
    }, {
      "data": "name"
    }, {
      "data": "position"
    }, {
      "data": "office"
    }, {
      "data": "salary"
    }, {
      "className": 'details-control',
      "orderable": false,
      "data": null,
      "defaultContent": ''
    }, ],
    "order": [
      [1, 'asc']
    ]
  });

  // Add event listener for opening and closing details
  $('#example tbody').on('click', 'td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child(format(row.data())).show();
      tr.addClass('shown');
    }
  });

  $('a.toggle-vis').on('click', function(e) {
    e.preventDefault();

    // Get the column API object
    var column = table.column($(this).attr('data-column'));

    // Toggle the visibility
    column.visible(!column.visible());
  });
  $('.list_view input[type="checkbox"]').on('change', function(e) {


    // Get the column API object
    var col = table.column($(this).attr('data-target'));

    // Toggle the visibility
    col.visible(!col.visible());
  });


});

tr{
  text-align:center;
}
a {
    cursor: pointer;
    color: #3174c7;
    text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<div>
  Toggle column: <a class="toggle-vis" data-column="1">Name</a> - <a class="toggle-vis" data-column="2">Position</a> - <a class="toggle-vis" data-column="3">Office</a> - <a class="toggle-vis" data-column="4">Salary</a>

</div>


<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th style="border-top-left-radius:10px;border-bottom-left-radius:10px;">S.No.</th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary</th>
      <th style="border-top-right-radius:10px;border-bottom-right-radius:10px;">View</th>
    </tr>
  </thead>

</table>

<div class="list_view">
  <h3 style="margin-left:50px; position:absolute;">View in the list </h3>
  <input type="checkbox" name="list"  data-target ="1" value="Name" checked style="color:white; margin-left: 90px; margin-top:55px;"> Name
  <br>
  <input type="checkbox" name="list" data-target ="2" value="Services" checked style="margin-left: 90px;"> Position
  <br>
  <input type="checkbox" name="list" data-target ="3" value="City" checked style="margin-left: 90px;"> Office
  <br>
  <input type="checkbox" data-target ="4" name="list" value="Categories" checked style="margin-left: 90px;"> Salary
  <br>
</div>

Collectives™ on Stack Overflow

How to show / hide columns dynamically using checkbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related