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

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

функция successCallback(responseObj){

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

  } );

}

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

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


jquery datatables datatables-1.10
person Undisputed007    schedule 27.05.2015    source источник

Ответы (3)


arrow_upward
69
arrow_downward

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

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

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

person Gyrocode.com    schedule 27.05.2015
comment
Что, если я также хочу сделать первый столбец (A1-A4) интерактивным, который будет использовать ту же ссылку? У меня проблема, когда я хочу, чтобы несколько столбцов были кликабельны, но использую один и тот же источник для href. Надеюсь, это имеет смысл. - person Trm; 24.12.2016
comment
@Trm, вы можете определить ту же функцию columns.render для остальных столбцов, вместо data используйте row['weblink']. Или вы можете использовать columnDefs.render и определить функцию render один раз и настроить таргетинг на все необходимые столбцы, используя параметр columnDefs.targets. - person Gyrocode.com; 24.12.2016
comment
Я пытался использовать columnsDefs, возможно, я что-то упустил, но проблема заключалась в том, что для каждого столбца отображались разные данные. Вот как выглядит мой код< /а> - person Trm; 24.12.2016
comment
@Trm, как я уже говорил, используйте full['name'] вместо data. - person Gyrocode.com; 25.12.2016
comment
Что делать, если у меня нет данных от объекта? Что, если я просто зацикливаюсь с PHP и хочу, чтобы теги привязки были вокруг зацикленных данных? - person twan; 23.08.2018
comment
не работает в angular 2 и выше. Привязка (клик) будет потеряна при использовании columns.render - person Silent Sojourner; 28.03.2020
comment
@SilentSojourner, используйте делегирование событий при присоединении обработчиков событий кликов, см. этой статьи. - person Gyrocode.com; 28.03.2020

arrow_upward
16
arrow_downward

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

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

person Adarsh Madrecha    schedule 07.12.2017
comment
Как вы работаете с селектором строк row.myid? Данные, которые я предоставляю Ajax, имеют строковые столбцы для содержимого ячейки и столбцы int, которые не используются для отображения ячейки, но в идеале я мог бы использовать их для сборки ссылки. Это именно то, что я пытаюсь сделать! - person Jon; 20.06.2018
comment
Я использую rowId: "taskno" (опция rowId), чтобы установить свойство id в HTML для тега tr, а затем использовать row.myid для ссылки/получения этого. Ссылка: datatables.net/reference/option/rowId - person Adarsh Madrecha; 20.06.2018
comment
В итоге я собрал URL вот так data = '<a href="/url/' + row['col2'] + '">' + data + '</a>'; - person Jon; 20.06.2018
comment
этот ответ спас мой день, даже если он старый - person Mathew Magante; 09.08.2020

arrow_upward
8
arrow_downward 

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

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

Более полный пример см. здесь

person ozz    schedule 27.05.2015
comment
Знаете ли вы, есть ли обходной путь, если у меня есть "targets": [0,1], они оба будут использовать данные из первого столбца (цель 0)? - person Trm; 24.12.2016
comment
см. ссылку на документацию в моем ответе. третий параметр - это данные строки (не уверен, почему в моем примере я назвал переменную полной, но это массив со всеми данными из строки - person ozz; 27.12.2016
comment
Да благословит тебя Бог. В примерах кода документации также указано «полный», поэтому, я думаю, вы его назвали. Я использовал full.column_name для получения данных. Я читал документацию несколько раз, но формулировка никогда не нажимала на меня, чтобы она возвращала полные данные строки. - person Trm; 05.01.2017