复杂的表头

通过rowspan / colspan制作复杂的表头,下面的例子演示了怎么隐藏一列,还可以参考简单初始化例子 制定复杂的表头(和并列/合并行)

Name HR Information Contact
Position Salary Office Extn. E-mail
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
$(document).ready(function() {
    $('#example').dataTable({
        "columnDefs": [{
            "visible": false,
            "targets": -1
        }]
    });
});
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">HR Information</th>
        <th colspan="3">Contact</th>
    </tr>
    <tr>
        <th>Position</th>
        <th>Salary</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>E-mail</th>
    </tr>
</thead>

<tfoot>
<tr>
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
</tr>
</tfoot>

<tbody>
<tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
</tr>
<tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
</tr>
<tr>
    <td>Ashton Cox</td>
    <td>Junior Technical Author</td>
    <td>San Francisco</td>
    <td>66</td>
    <td>2009/01/12</td>
    <td>$86,000</td>
</tr>
<tr>
    <td>Cedric Kelly</td>
    <td>Senior Javascript Developer</td>
    <td>Edinburgh</td>
    <td>22</td>
    <td>2012/03/29</td>
    <td>$433,060</td>
</tr>
<tr>
    <td>Airi Satou</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>33</td>
    <td>2008/11/28</td>
    <td>$162,700</td>
</tr>
<tr>
    <td>Brielle Williamson</td>
    <td>Integration Specialist</td>
    <td>New York</td>
    <td>61</td>
    <td>2012/12/02</td>
    <td>$372,000</td>
</tr>
<tr>
    <td>Herrod Chandler</td>
    <td>Sales Assistant</td>
    <td>San Francisco</td>
    <td>59</td>
    <td>2012/08/06</td>
    <td>$137,500</td>
</tr>
</tbody>
</table>

http://datatables.net/examples/advanced_init/complex_header.html

Translation from DataTables.net, with permission
x

为什么有广告?

希望你能理解我们为什么会在这里显示广告。为了给大家提供文档供大家查询,帮助大家解决问题。但是域名、服务器以及维护都需要资金,所以我们必须显示广告。谢谢你们的支持!

爱你们,
DataTables中文网

i
x

为什么有广告?

希望你能理解我们为什么会在这里显示广告。为了给大家提供文档供大家查询,帮助大家解决问题。但是域名、服务器以及维护都需要资金,所以我们必须显示广告。谢谢你们的支持!

爱你们,
DataTables中文网

i