用链接替换 ​​DataTable 内容

Posted 2023-05-09

【中文标题】用链接替换 ​​DataTable 内容

【英文标题】：Replacing DataTable content with links

【发布时间】：2015-10-05 19:23:09

【问题描述】：

我的视图中有一个基本的 DataTable。表格列之一显示电话号码。我必须处理的所有数字都是十位数，没有任何格式（如破折号或括号）。

我想用包含此电话号码的链接替换所有这些号码。

我该怎么做呢？

---

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

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

  <script>
    $(document).ready( function () 
      $('#mydata').click(function()
        var phone = $(this).find(/\d10/).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>

不幸的是，无论我在表格中的哪个位置单击，这里的功能似乎都会触发，并且不会在链接中嵌入电话号码。

【参考方案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;
             
          
       
    ]
   );
 );

演示

请参阅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(/(\d10)/, "<a href=\"http://somelink$1.jpg\">$1</a>");
              else 
                return data;
             
          
       
    ]
   );
 );

演示

请参阅this jsFiddle 进行演示。

【讨论】：

感谢您的回复。如果我知道哪一列包含电话号码，这将非常有效。如果我不知道这一点，我需要做什么？我并不总是知道哪一列（或者如果有的话）有电话号码，这就是我采用正则表达式方法的原因。

@Azarantara，为所有列的正则表达式方法添加了另一个示例。

【参考方案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>

【参考方案3】：

您没有在问题中提及 rails，但您使用 rails 标记了您的问题。所以这里有一个 rails/ruby 解决方案。通常电话号码链接会发起电话呼叫，而不是链接到文件/其他站点，因此我将链接从 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

如果您想创建调用，也可以使用特定于 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