[英]How can I create Collapsible Column header in Data Table?
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.
我想要的是我想通过在它们名称旁边添加+和 - 符号来使HR Information列和联系人列可折叠。 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. 我必须修复Contact列的colspan,因为它需要是3而不是4。
Here is a working jsbin: https://jsbin.com/kaloxokadu/edit?html,js,output 这是一个有效的jsbin: https ://jsbin.com/kaloxokadu/edit ? html,js,output
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.