我使用dataTables创建了一个表，它可以对自己进行排序。
我希望每个列都有一个复选框，当活动时显示列，否则隐藏。如果有人知道该怎么做，请帮助我。
codepen a
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>
答案 0 :(得分：1)
您需要使用on change事件，并使用data属性（在本例中使用data-target）将复选框与列相关联。
请参阅下面的代码段
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>