标题居中需要在全局css文件中定义table的样式,假设在一个html的div中这样定义一个dataTable:
<table class="table table-striped table-bordered table-hover" id="datatable">
<thead>
<tr>
<th></th>
<th></th>
<th> 账号 </th>
<th> 密码 </th>
<th> 数量 </th>
<th> 类型 </th>
<th> 时间 </th>
<th> 操作 </th>
</tr>
</thead>
</table>
前面两个th内容为空是因为我这个表格不需要显示复选框和序号列,所以内容为空,然后在js中dataTable初始化时 ,columns的前两列data设为null,visible设为false,就隐藏了这两列:
columns: [
{"data": null, "visible": false},
{"data": null, "visible": false},
....
然后在全局css文件中重写table里面的th样式,代码如下:
.table th {
text-align: center;
vertical-align: middle !important;
}
最后是实现每列内容居中,通过在dataTable初始化时的createRow参数实现,初始化时绘制每一列时设置样式:
createdRow: function( row, data, dataIndex ) {
$(row).children('td').attr('style', 'text-align: center;vertical-align: middle;');
},