场景

某天领导提出要求：

表头文字居中，序号、系统自动编码、有规则约束的编码、码表关联信息显示样式居中，金额、数量等右对齐，其他文字信息左对齐。

在DataTables中如何给每列添加样式。

实现

 columns: [{ data: 'id',className :'badao_Center'},{ data: 'purchaseCode',className :'badao_Center' },{ data: 'deliveryTime',className :'badao_Center' ,render: function (data, type, full, meta ) {return moment(data).format("YYYY-MM-DD ");} },{ data: 'createrName',className :'badao_Center'  },//暂时先用创建人代替{ data: 'supplierCode',className :'badao_Center' },{ data: 'supplierName'  ,className :'badao_Left' },{ data: 'totalTray' ,className :'badao_Right'  },{ data: 'totalNum' ,className :'badao_Right' },{ data: 'deliveryCode',className :'badao_Center' },{ data: 'createrName' ,className :'badao_Center'},{ data: 'gmtCreat',className :'badao_Center' ,render: function (data, type, full, meta ) {return moment(data).format("YYYY-MM-DD");} },{ data: 'status',className :'badao_Center',render: function (data, type, full, meta ) {if(data.trim()=="1"){return '未提交'}else if(data.trim()=="2"){return '已提交'}else if(data.trim()=="3"){return '已打印'}else if(data.trim()=="4"){return '已入库'}else{return '未知状态'}}  },],

通过给columns里的每一列添加className属性。

其中样式名是在当前页面的css文件中定义的。

.badao_Center{text-align: center;vertical-align: middle!important; } .badao_Right{text-align: right;vertical-align: middle!important; } .badao_Left{text-align: left;vertical-align: middle!important; }

 

总结

以上是生活随笔为你收集整理的DataTables中给某列添加样式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。