//序号的生成
"fnDrawCallback": function() {
this.api().column(1).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
},
"aoColumns": [{
"data": null,
"title": "序号",
"defaultContent": "",
"width": "4%",
"class": "text-center"
},
{
//悬浮框的使用
//1.第一步在js引入方法,写在所需限制字段的class后面,效果当超出部分将已“...”代替,鼠标放上面时触发悬浮框效果
"render": function(data, type, row, meta) {
if (data) {
data = data.substring(0, data.length - 1);
var showdata = data;
if (data.length > 4) {
showdata = data.substring(0, 4) + "..";
}
return '<div class="" data-toggle="tooltip" title="' + data + '">' + showdata + '</div>';
} else {
return '--';
}
}
//(在公共js中写悬浮框的使用方法,方便以后调用,相关代码可以查看本人博客jqueryUtil.js)
//判定状态类型选择是否出现功能按钮
},
{
"title": "操作",
"defaultContent": "",
"class": "text-center",
"width": "12%",
"createdCell": function(nTd, sData, oData, iRow, iCol) {
var regBatchId = oData.regBatchId;
var certificateId = oData.certificateId;
if (oData.status == '0') {
var content = '<button class="btn btn-xs blue" onclick="showPreRegVerifyBackTracking(\'' + regBatchId + '\')"> 补录 </button>';
content += '<button class="btn btn-xs red" onclick="showPreRegVerifyVoidModal(\'' + regBatchId + '\')"> 作废 </button>';
} else if (oData.status == '1') {
var content = '<button class="btn btn-xs blue" onclick="showPreRegVerifyCheck(\'' + regBatchId + '\',\'' + certificateId + '\')"> 查看 </button>';
} else {
var content = '<button class="btn btn-xs blue" onclick="showPreRegVerifyBackTracking(\'' + regBatchId + '\')"> 补录 </button>';
}
$(nTd).html(content);
}
}],
//根据拿取到的数值0或1,在页面上输出对应的状态中文
},
{
"data": "status",
"title": "状态",
"defaultContent": "",
"width": "14%",
"class": "text-center",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
var status = oData.status;
var content = "";
if ("0" == status) {
content = "待补录";
} else if ("1" == status) {
content = "初审通过";
} else {
content = "已作废";
}
$(nTd).html(content);
}
Datables行样式超出解决
问题有一段时间了,之前遇到的问题就是字段很长,然后渲染到表格里,列长度会被无限拉长,尤其是当你的字段特别长的情况下,那么整个列会被无限拉长,丑的要死.
解决方法就是重新渲染一下,添加自定义的样式.
{
"data": "name",
orderable: false,
"render": function (data, type, full, meta) {
//设置宽度为200px,当字符串长度过大时,自动变成省略号,追加悬停显示完整信息
var transStr = '<div class="shortStr" style="text-overflow: ellipsis;' +
'white-space: nowrap;' +
'overflow: hidden; ' +
'width: 200px;"' +
'title=' + data + '>' + data + '</div>';
return transStr;
},
},
选取了某一列的具体代码,注意render
的属性列,进行重新渲染,在表格里追加样式.