Datatables提供了一组基本的样式用来定位元素,比如搜索框,分页控制等,但也有很多功能可以通过样式名选择性启动。
进一步,除了通过样式名控制表的样式特性,表的颜色方案可以使用在线主题制作 。
下面列举了Datatables默认的样式名,通过他们可以控制不同样式特性
样式名 |
描述 |
display | 涵盖下面样式 |
stripe | 条纹状态 |
hover | 当鼠标经过时高亮行显示 |
cell-border | 给每个单元设置边框 |
row-border | 给每行设置边框,注意:cell-border和row-border不能同时使用 |
order-column | 高亮显示表格目前那列排序 |
看文字没感觉,下面通过示例来告诉大家该怎么使用这些样式名
display
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Name | Position | Office | Age | Start date | Salary |
Ashton Cox | Technical Author | San Francisco | 66 | 2009/01/12 | $4,800 |
Cedric Kelly | Javascript Developer | Edinburgh | 22 | 2012/03/29 | $3,600 |
Garrett Winters | Director | Edinburgh | 63 | 2011/07/25 | $5,300 |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $3,120 |
stripe
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Name | Position | Office | Age | Start date | Salary |
Ashton Cox | Technical Author | San Francisco | 66 | 2009/01/12 | $4,800 |
Cedric Kelly | Javascript Developer | Edinburgh | 22 | 2012/03/29 | $3,600 |
Garrett Winters | Director | Edinburgh | 63 | 2011/07/25 | $5,300 |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $3,120 |
hover
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Name | Position | Office | Age | Start date | Salary |
Ashton Cox | Technical Author | San Francisco | 66 | 2009/01/12 | $4,800 |
Cedric Kelly | Javascript Developer | Edinburgh | 22 | 2012/03/29 | $3,600 |
Garrett Winters | Director | Edinburgh | 63 | 2011/07/25 | $5,300 |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $3,120 |
cell-border
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Name | Position | Office | Age | Start date | Salary |
Ashton Cox | Technical Author | San Francisco | 66 | 2009/01/12 | $4,800 |
Cedric Kelly | Javascript Developer | Edinburgh | 22 | 2012/03/29 | $3,600 |
Garrett Winters | Director | Edinburgh | 63 | 2011/07/25 | $5,300 |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $3,120 |
row-border
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Name | Position | Office | Age | Start date | Salary |
Ashton Cox | Technical Author | San Francisco | 66 | 2009/01/12 | $4,800 |
Cedric Kelly | Javascript Developer | Edinburgh | 22 | 2012/03/29 | $3,600 |
Garrett Winters | Director | Edinburgh | 63 | 2011/07/25 | $5,300 |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $3,120 |
order-column
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Name | Position | Office | Age | Start date | Salary |
Ashton Cox | Technical Author | San Francisco | 66 | 2009/01/12 | $4,800 |
Cedric Kelly | Javascript Developer | Edinburgh | 22 | 2012/03/29 | $3,600 |
Garrett Winters | Director | Edinburgh | 63 | 2011/07/25 | $5,300 |
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $3,120 |
Translation from DataTables.net, with permission