Я хочу создать ссылки в полях данных в DataTables из данных JSON

Ответ 1

вы должны использовать опцию fnRowCallback, см. документация.

$('#example').dataTable({
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": "archive/archive.txt",
     "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
                aData[2] + '</a>');
            return nRow;
        },
});

Ответ 2

Вы также можете использовать mRender с помощью aoColumnDefs:

$('#example').dataTable({
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "archive/archive.txt",
  "aoColumnDefs": [            
     {
       "aTargets": [ 2 ], // Column to target
       "mRender": function ( data, type, full ) {
         // 'full' is the row data object, and 'data' is this column data
         // e.g. 'full[0]' is the comic id, and 'data' is the comic title
         return '<a href="/comics/' + full[0] + '">' + data + '</a>';
       }
     }
   ]
});

Это более явный и, вероятно, более удобный, поскольку вы можете указать, как отдельные столбцы отображаться на уровне столбца, а не выбирать их через DOM на уровне строк, что помогает, когда вы добавляете столбцы позже.

Ответ 3

$('#example').dataTable({
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": "archive/archive.txt"
     "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
                aData[2] + '</a>');
            return nRow;
        },
});

Ответ 4

Ниже, это то, что я сделал, чтобы изменить текст html в ячейке столбца, учитывая определенное значение в массиве объектов aaData. Это работает, но чувствует себя ужасно, потому что html-разметка находится в javascript, как указано выше.

var dataTableMeta = { "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": url
                                , "aoColumns": aoColumns
                                , "fnServerData": function (sSource, aoData, fnCallback) {
                                    $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback,
                                        'dataFilter': function (data, type) {
                                            var jsObject = jQuery.parseJSON(data);
                                            for (var i = 0; i < jsObject.aaData.length; i++) {
                                                jsObject.aaData[i].CaseID = '<a href="" >' + jsObject.aaData[i].CaseID + '</a>';
                                            }
                                            var jsonString = JSON.stringify(jsObject);
                                            return jsonString;
                                        }
                                    });
                                }
        };

        $('#caseSearchTable').dataTable(dataTableMeta);

Ответ 5

Если использование последней версии v1.10.16 может использовать render function обратный вызов.

$('#example').dataTable({
   "data": responseObj,
   "columns": [
      { "data": "information" }, 
      { 
         "data": "weblink",
         "render": function(data, type, row, meta){
            if(type === 'display'){
                data = '<a href="' + row.myid + '">' + data + '</a>';
            }
            return data;
         }
      } 
   ]
});

Я только что изменил функцию рендеринга. data относится только к текущим данным столбца, тогда как объект row относится ко всей строке данных. Следовательно, мы можем использовать это, чтобы получить любые другие данные для этой строки.

Если вы хотите установить ссылку на значение текущего столбца, можете использовать

if(type === 'display'){
    data = '<a href="' + data + '">' + data + '</a>';
}

Ответ 6

Я не мог получить ни одного из ответов, чтобы выполнить то, что я пытался сделать.

Я хотел показать DisplayedColumn в столбце данных, но при нажатии на него был отправлен идентификатор с запросом. Я также не хотел отображать столбец ID.

Вот как я этого добился:

columns: [
  { "data": "ID", "visible" : false },
  { "data": "DisplayedColumn" },
...
columnDefs: [ {
  targets: [1],
  "render": function (data, type, row, meta) {
     return '<a href="/Area/Controller/Action/' + row.ID + '">' + data + '</a>';
   }
}
...

Это было, к сожалению, очень трудно найти ответ, который работал для меня, я надеюсь, что это кому-то поможет.