Замена содержимого DataTable на ссылки

Question

У меня есть базовый DataTable на мой взгляд. В одной из столбцов таблицы указаны номера телефонов. Все числа, с которыми мне приходится иметь дело, - это ровно десять цифр без форматирования (например, тире или круглые скобки).

Я хотел бы заменить все эти номера ссылкой, в которой есть этот номер телефона.

Как бы я это сделал?

---

Я пытался что-то на основе этого вопроса: jquery, dynamically create link from text in td cell

Я заменил код, чтобы иметь регулярное выражение для всего десять цифр. Это сценарий, который я вызываю сразу после моей таблицы HTML, которая имеет id="mydata". Представление содержит только эту таблицу и сценариев:

<script> 
    $(document).ready(function() { 
     $('#mydata').click(function(){ 
     var phone = $(this).find(/\d{10}/).text(); 
     window.location.href = "http://somelink" + phone + ".jpg" 
     }); 

     $('#mydata').DataTable({ 
     deferRender: true,  // Renders only the rows that are visible 
     dom:   'frtiS', // Additional parameters. See docs. 
     scrollCollapse: true,  // Collapses table if there are few results 
     scrollY:  700  // Height of the container 
     }); 
    }); 
    </script> 

К сожалению, здесь функции, кажется, чтобы вызвать, независимо от того, где я нажимаю на столе, и не вставлять номер телефона в ссылке.

Answer 1

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

РЕШЕНИЕ 1: Визуализация данных в одном столбце

Например, если второй столбец (targets: 1, индексы с нуля) содержит телефонные номера, используйте код ниже:

$(document).ready(function() { 
    $('#mydata').DataTable({ 
    deferRender: true,  // Renders only the rows that are visible 
    dom:   'frtiS', // Additional parameters. See docs. 
    scrollCollapse: true,  // Collapses table if there are few results 
    scrollY:  700,  // Height of the container 
    columnDefs: [ 
     { 
      targets: 1, 
      render: function(data, type, full, meta){ 
      if(type === 'display'){    
       return '<a href="http://somelink' + data + '.jpg">' + data + '</a>'; 
      } else { 
       return data; 
      } 
      } 
     } 
    ] 
    }); 
}); 

DEMO

См. this jsFiddle для демонстрации.

---

РЕШЕНИЕ 2: Визуализация данных во всех колонках

Чтобы визуализировать данные во всех колонках, даже если номер телефона только часть данных, используйте код ниже.

$(document).ready(function() { 
    $('#mydata').DataTable({ 
    deferRender: true,  // Renders only the rows that are visible 
    dom:   'frtiS', // Additional parameters. See docs. 
    scrollCollapse: true,  // Collapses table if there are few results 
    scrollY:  700,  // Height of the container 
    columnDefs: [ 
     { 
      targets: "_all", 
      render: function(data, type, full, meta){ 
      if(type === 'display'){    
       return return data.replace(/(\d{10})/, "<a href=\"http://somelink$1.jpg\">$1</a>"); 
      } else { 
       return data; 
      } 
      } 
     } 
    ] 
    }); 
}); 

DEMO

См this jsFiddle для демонстрации.

Answer 2

Вы можете использовать columnDefs property of DataTable. См. Мой основной пример ниже. Очевидно, вам нужно будет изменить свойство «target», чтобы указать на индекс столбца, который содержит ваши номера телефонов.

$(document).ready(function() { 
 

 
    var table = $('#mydata').DataTable({ 
 
    deferRender: true, // Renders only the rows that are visible 
 
    dom: 'frtiS', // Additional parameters. See docs. 
 
    scrollCollapse: true, // Collapses table if there are few results 
 
    scrollY: 700, // Height of the container 
 
    "columnDefs": [{ 
 
     "render": function(data, type, row) { 
 
     return '<a href="http://somelink/' + data + '.jpg">' + data + '</a>'; 
 
     }, 
 
     "targets": 1 
 
    }] 
 
    }); 
 

 
});

<table id="mydata"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Phone no</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>John Smith</td> 
 
     <td>1234567890</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

Вы не упомянули рельсов в вашем вопросе, но вы пометили свои вопросы с рельсами. Итак, вот рельсы/рубиновый раствор.Обычно ссылки на номера телефонов инициируют телефонный звонок вместо ссылки на файл/другой сайт, поэтому я переключил ссылку из файла jpeg, чтобы инициировать телефонный звонок, но вы могли бы использовать ту же логику для создания файла jpeg.

В представлении я называю вспомогательный метод:

<td><%= phone_number_link(@user.number) %></td> 

В помощнике

def phone_number_link(phone_number) 
    sets_of_numbers = phone_number.scan(/[0-9]+/) #only needed if you may have (or -'s 
    number = "+1-#{sets_of_numbers.join('-')}" 
    link_to phone_number, "tel:#{number}" 
end 

Или рельсы конкретное решение, если вы хотите создать вызов:

<td><%= link_to number_to_phone(text), "tel:#{number_to_phone(text, country_code: 1)}" %></td> 

Это вероятно, также следует перенести на вспомогательный метод, такой как:

def phone_number_link(number) 
    link_to number_to_phone(number), "tel:#{number_to_phone(number, country_code: 1)}" 
end