用链接替换 DataTable 内容

Question

我有一个基本的数据表。 table 列之一显示 phone 个数字。我必须处理的所有数字都是十位数字，没有任何格式（如破折号或括号）。

我想用一个 link 替换所有这些数字，其中包含这个 phone 数字。

我该怎么做？

我根据这个问题尝试了一些东西： jquery, dynamically create link from text in td cell

我将代码替换为只有十位数的正则表达式。这是我在 HTML table 之后立即调用的脚本，它有 id="mydata"。该视图仅包含此 table 和脚本：

  <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>

不幸的是，这里的功能似乎无论我在 table 中单击何处都会触发，并且不会在 link.

中嵌入 phone 数字

Answer 1

如果您的列仅包含 phone 个数字，那么您可以使用 columnDefs option to target specific column and define a columns.render 回调函数，该函数将在需要呈现该列中的数据时调用。

解决方案 1：在单列中呈现数据

例如，如果第二列（targets: 1，索引从零开始）包含 phone 个数字，请使用以下代码：

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

演示版

请参阅 this jsFiddle 进行演示。

解决方案 2：在所有列中呈现数据

要在所有列中呈现数据，即使 phone 数字只是数据的一部分，请使用以下代码。

$(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.jpg\"></a>");
             } else {
                return data;
             }
          }
       }
    ]
  } );
} );

演示版

请参阅 this jsFiddle 进行演示。

Answer 2

您可以使用 DataTable 的 columnDefs 属性。请参阅下面的基本示例。显然，您需要更改 "targets" 属性以指向包含您的电话号码的列的索引。

$(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

你没有在你的问题中提到 rails，但是你用 rails 标记了你的问题。所以这是一个 rails/ruby 解决方案。通常 phone 号码 links 将发起 phone 呼叫而不是 linking 到 file/other 站点，所以我将 link 从jpeg 文件来启动 phone 调用，但您可以使用相同的逻辑来创建 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

或者 rails 特定的解决方案，如果你想创建调用：

<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

用链接替换 DataTable 内容

Replacing DataTable content with links

jquery

ruby-on-rails

datatables

用链接替换 ​​DataTable 内容

Replacing DataTable content with links

jquery

ruby-on-rails

datatables

用链接替换 DataTable 内容