Как создать заголовок сворачиваемого столбца в таблице данных?

Question

У меня есть этот код ниже.Я хочу, чтобы столбец «Информация о людях» и столбец контактов был разборным, добавив символ «+» и «-» рядом с именем.Как я могу это сделать?

<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;
}

Answer 1

Я не думаю, что помещать значок рядом с именем столбца - это лучшая идея, так как при скрытии столбцов значок будет скрыт.

Вместо этого я добавил два флажка над таблицей, которые будут более полезными.

<p>Toggle HR Info <input id="hrCheck" type="checkbox" /></p>
<p>Toggle Contact Info <input id="contactCheck" type="checkbox" /></p>

Мне пришлось исправить colspan для столбца Contact, так как он должен был быть 3 вместо 4.

Вот рабочий jsbin: https://jsbin.com/kaloxokadu/edit?html,js,output