Javascript 如何编辑DataTableJSON响应？

我需要编辑此代码的

列

部分，以更改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")
});

---

您可以通过使用属性来实现这一点，例如，在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
        })
      }
    }
  ]

---

供您参考。

您可以通过使用属性来实现这一点，例如，在EFICAZ_选项卡_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
        })
      }
    }
  ]

---

供您参考。

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

添加一个列类

列：[
...
{
“数据”：“EFICAZ_TAB_RESULTADO”，
“类名称”：“hyperlinkClass”
}
...
]

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

添加一个列类

列：[
...
{
“数据”：“EFICAZ_TAB_RESULTADO”，
“类名称”：“hyperlinkClass”
}
...
]