dataTable.js使用总结(包含序号生成，悬浮框使用等)

//序号的生成
"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的属性列,进行重新渲染,在表格里追加样式.