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的屬性列,進行重新渲染,在表格裡追加樣式.