Question

我需要编辑此代码的columns部分，以更改json响应生成的表的tr和td的内容。例如，我需要在 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

您可以使用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供您参考。

Answer 2

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

添加列类

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何编辑数据表json响应？

2 个答案: