Сделать данные столбца гиперссылкой (dataTable JQUERY)

Я пытаюсь сделать столбец гиперссылкой с datatable, но без успеха.

function successCallback (responseObj) {

  $(document).ready(function() {
         $('#example').dataTable( {
        "data":responseObj ,
        "bDestroy": true,
        "deferRender": true ,
        "columns": [
                    { "data": "infomation" },
                    { "data": "weblink" },
                ]
  } );

  } );

}

Мне нужна веб-ссылка, чтобы отобразить ссылку и быть гиперссылкой в этом столбце, чтобы пользователи могли щелкнуть и перенаправить на другую страницу. Я просмотрел render, но с меньшим количеством информации там по ссылкам, я не могу это сделать.

Я также рассмотрел этот пример, но это было не очень полезно.

Ответы

Ответ 1

Используйте columns.render API-метод для динамического создания содержимого для ячейки.

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

            return data;
         }
      } 
   ]
});

Смотрите этот пример для кода и демонстрации.

Ответ 2

    $('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
} );

Из документации. Для меня это совершенно ясно и понятно, что конкретно вы не понимаете? Какие ошибки вы видите?

Для более полного примера см. здесь

Ответ 3

Если вы хотите добавить ссылку, основанную на других данных столбца, можете использовать подход ниже.

$('#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 относится ко всей строке данных. Следовательно, мы можем использовать это, чтобы получить любые другие данные для этой строки.