I have this Below Code. What I want is I want to make HR Information column and contact column to be collapsible by adding + and - symbol next to them name. How can I do it?
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"
rel="stylesheet">
<link href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<table id="example" class="stripe row-border order-column table table-condensed table-striped table-bordered" style="width:100%" >
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2" class="header-1" name="speed">HR Information <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /></th>
<th colspan="4">Contact</th>
</tr>
<tr class="this_h">
<th id="hrcolumn" class="x" name="speed">Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
<td>Edinburgh</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>$170,750</td>
<td>Tokyo</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>$86,000</td>
<td>San Francisco</td>
<td>1562</td>
<td>a.cox@datatables.net</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
var table = $('#example').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true
});
});
th, td {
white - space: nowrap;
padding - left: 40 px!important;
padding - right: 40 px!important;
}
div.dataTables_wrapper {
width: 800 px;
margin: 0 auto;
}
I don't think putting the icon next to the column name is the best idea, as when you hide the columns, the icon itself would be hidden.
Instead of this I have added two checkboxes above the table that will be of better use.
<p>Toggle HR Info <input id="hrCheck" type="checkbox" /></p>
<p>Toggle Contact Info <input id="contactCheck" type="checkbox" /></p>
I had to fix the colspan for the Contact column as it needed to be 3 instead of 4.
Here is a working jsbin: https://jsbin.com/kaloxokadu/edit?html,js,output
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.