如何使用复选框动态显示/隐藏列(How to show / hide columns dynamically using checkbox)
我使用dataTables创建了一个表，它可以对自己进行排序。 我希望每个列都有复选框，当活动时显示列并以其他方式隐藏。 如果有人知道该怎么做，请帮助我。 代码中的代码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>
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>
最满意答案
您需要使用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>
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>
更多推荐
发布评论