Default styling options

Datatables提供了一组基本的样式用来定位元素,比如搜索框,分页控制等,但也有很多功能可以通过样式名选择性启动。

进一步,除了通过样式名控制表的样式特性,表的颜色方案可以使用在线主题制作

Options

下面列举了Datatables默认的样式名,通过他们可以控制不同样式特性

样式名 描述
display 涵盖下面样式
stripe 条纹状态
hover 当鼠标经过时高亮行显示
cell-border 给每个单元设置边框
row-border 给每行设置边框,注意:cell-border和row-border不能同时使用
order-column 高亮显示表格目前那列排序

看文字没感觉,下面通过示例来告诉大家该怎么使用这些样式名

display

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
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
Showing 1 to 4 of 4 entries

stripe

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
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
Showing 1 to 4 of 4 entries

hover

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
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
Showing 1 to 4 of 4 entries

cell-border

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
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
Showing 1 to 4 of 4 entries

row-border

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
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
Showing 1 to 4 of 4 entries

order-column

NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
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
Showing 1 to 4 of 4 entries

http://datatables.net/manual/styling/classes

Translation from DataTables.net, with permission