标题居中需要在全局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;');
            },

            

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐