javascript - 如何编辑数据表json响应？

Question

我需要编辑此代码的 columns 部分，以更改 json 响应生成的表的 tr 和 td 的内容。例如，我需要在 EFICAZ_TAB_RESULTADO 列上插入一个超链接以使用点击事件。

我不知道如何完成这项任务，我需要帮助!

$(document).ready(function(){
    // Setup datatables
    $.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings){
        return {
            "iStart": oSettings._iDisplayStart,
            "iEnd": oSettings.fnDisplayEnd(),
            "iLength": oSettings._iDisplayLength,
            "iTotal": oSettings.fnRecordsTotal(),
            "iFilteredTotal": oSettings.fnRecordsDisplay(),
            "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
            "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
        };
    };
    var table = $("#mytable").dataTable({
        initComplete: function() {
            var api = this.api();
            $('#mytable_filter input').off('.DT').on('input.DT', function(){
                api.search(this.value).draw();
            });
        },
        oLanguage: {
            sProcessing: "carregando ..."
        },
        processing: true,
        serverSide: true,
        searching: false,
        ajax: {
            "type": "POST",
            "url": "/tab/getJsonAllOcorrenciasTabForMonth"
        },
        pageLength: 100,
        columns: [
            {"data": "EFICAZ_TAB_ID"},
            {"data": "ID"},
            {"data": "PERIODICIDADE"},
            {"data": "EFICAZ_TAB_MES_ANO"},
            {"data": "EFICAZ_TAB_ITEM_ID"},
            {"data": "EFICAZ_TAB_META"}, // if EFICAZ_TAB_META é diferente de EFICAZ_TAB_RESULTADO
            {"data": "EFICAZ_TAB_RESULTADO"}
        ],
        order: [
            [1, 'asc']
        ],
        rowCallback: function(row, data, iDisplayIndex) {
            var info = this.fnPagingInfo();
            var page = info.iPage;
            var length = info.iLength;
            $('td:eq(0)', row).html();
        }
    }); // end setup datatables
    // addClass para formatar estilo bootstrap ...
    $("#mytable_length select").addClass("form-control")
});

Answer 1

我建议使用rowCallback。这允许您在将行绘制到表中时对其进行修改。您只需选择相应行中的单元格即可对其进行修改。我建议向该列添加一个类:

1. 添加列类

columns: [
  ...
  {
     "data": "EFICAZ_TAB_RESULTADO",
     "className": "hyperlinkClass"
  }
  ...
]

每次绘制新行时修改该单元格

rowCallback: function(row, data, iDisplayIndex) {
  $(row).find(".hyperlinkClass").html('<a href="ENTER HYPERLINK HERE" target="_blank">HYPERLINK TEXT</a>');
}