Как редактировать датированный ответ JSON?

Question

Мне нужно отредактировать секцию columns этого кода для изменения содержимого tr и td для таблицы, сгенерированной ответом json.Например, мне нужно вставить гиперссылку на EFICAZ_TAB_RESULTADO для использования click event.

Я не знаю, как выполнить эту задачу, и мне нужна помощь!

$(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>');
}

Answer 2

Этого можно достичь, используя свойство columnDefs, например, добавив событие щелчка в столбец EFICAZ_TAB_RESULTADO :

columnDefs: [{
      "targets": [6],//index of EFICAZ_TAB_RESULTADO
      "createdCell": (td, cellData, rowData, row, col) => {
        $(td).css({
          'color': '#007bff',
          'cursor': 'pointer'
        });
        $(td).attr('title', 'Click Me');
        $(td).click(e => {
          alert(cellData) //call the function here
        })
      }
    }
  ]

Fiddle для справки.