通过rowspan / colspan制作复杂的表头,下面的例子演示了怎么隐藏一列,还可以参考简单初始化例子 制定复杂的表头(和并列/合并行)
Name | HR Information | Contact | |||
---|---|---|---|---|---|
Position | Salary | Office | Extn. | ||
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