我的视图中有一个基本的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>
不幸的是,这里的功能似乎无论我在表格中点击哪里都会触发,并且不会在链接中嵌入电话号码。
答案 0 :(得分:2)
如果您的列只包含电话号码,那么您可以使用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(/(\d{10})/, "<a href=\"http://somelink$1.jpg\">$1</a>");
} else {
return data;
}
}
}
]
} );
} );
<强>样本强>
请参阅this jsFiddle进行演示。
答案 1 :(得分:1)
您可以使用columnDefs
的{{1}}属性。请参阅下面的基本示例。显然,您需要更改“targets”属性以指向包含您的电话号码的列的索引。
DataTable
$(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
}]
});
});
答案 2 :(得分:0)
您在问题中未提及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