jQuery DataTables fnCreatedCell 回調函數五個參數詳細說明

DataTables 的 fnCreatedCell 回調在單元格創建時觸發，常用於自定義單元格渲染。本文詳細說明其五個參數含義及典型用法。

參數列表

"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) { ... }

典型應用場景

1. 根據數值動態設置顏色

fnCreatedCell: function(nTd, sData, oData, iRow, iCol) {
    if (iCol === 3) { // 假設第4列是狀態
        $(nTd).css('color', sData === '失敗' ? 'red' : 'green');
    }
}

2. 綁定點擊事件獲取整行數據

fnCreatedCell: function(nTd, sData, oData, iRow, iCol) {
    if (iCol === 0) { // 第一列綁定點擊
        $(nTd).on('click', function() {
            console.log('行數據:', oData);
            console.log('行索引:', iRow);
        });
    }
}

3. 根據其他列值決定當前列渲染

fnCreatedCell: function(nTd, sData, oData, iRow, iCol) {
    if (iCol === 4 && oData.status === 'urgent') {
        $(nTd).addClass('highlight').attr('title', '緊急處理');
    }
}

注意事項

• nTd 是原生 DOM，用 jQuery 包裹時用 $(nTd)。
• iRow 是顯示索引，若需原始數據索引，可用 table.row(iRow).index()。
• DataTables 1.10+ 建議使用 createdCell 選項（語法相同），fnCreatedCell 為舊版兼容寫法。
• 大量 DOM 操作時考慮性能，可在 initComplete 中統一處理或使用 columns.render。

熟練掌握五個參數，能靈活實現單元格級的深度定制。