Jquery Datatable是一個非常強大的表格插件,支持分頁,排序,搜索等常見功能。在實際開發中,經常需要使用到多表頭的情況,本文將介紹如何實現jquery datatable的多表頭功能。
首先,我們要引入jquery datatable的樣式文件和js文件:
接下來,我們需要準備數據,并使用jquery datatable初始化表格:
Name | Position | Office | Salary | ||
---|---|---|---|---|---|
Start date | End date | Start date | End date | ||
Name | Position | Office (extension) | Start date | Salary | |
Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 | |
Garrett Winters | Accountant | Tokyo | 2011/07/25 | $170,750 | $320,800 |
Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 | $320,800 |
在表格的thead中,我們可以看到有兩個tr標簽,第一個tr標簽包含了表格的大表頭,第二個tr標簽包含了表格的小表頭。對于大表頭的單元格,我們使用rowspan屬性將它們縱向合并;對于小表頭的單元格,我們使用colspan屬性將它們橫向合并。
最后,我們調用jquery datatable插件的DataTable()方法,對表格進行初始化。結果如下:
Name Position Office Salary Start date End date Start date End date Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800 Garrett Winters Accountant Tokyo 2011/07/25 $170,750 $320,800 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000 $320,800
通過以上方法,我們成功地實現了jquery datatable的多表頭功能。希望對大家有所幫助。