按钮在数据表内单击未显示正确的 URL

Question

我使用DataTables显示所有客户数据，如下所示：

<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script>
var theTable = null;
$(document).ready(function() {
theTable = $('#table-customer').DataTable({
"processing": true,
"serverSide": false,
"ordering": true, 
"order": [[ 0, 'asc' ]], 
"ajax":
{
"url": "http://localhost/myshop/showdata.php", 
"type": "GET"
},
"sAjaxDataProp": "data",
"deferRender": true,
"aLengthMenu": [[5, 10, 20, 50],[ 5, 10, 20, 50]], 
"columns": [
{ data: "cust_id" }, 
{ data: "cust_name" }, 
{ data: "cust_addr" },
{ data: "cust_email" },
{ data: "cust_phone" },
{ data: "cust_photo", sortable: true, render: function (o) { return '<button id="btn1" onclick="displayImage(data)">Show</button>';}
]
});
});
function displayImage(link){
window.alert(link);
}
</script>

所有信息都显示正确，除了一件事：如果你点击"上的任何按钮；客户照片"；列，而不是显示显示其URL的警报，什么也没发生。检查页面显示：

未捕获引用错误：未定义数据在HTMLButtonElement.onclick(view.html:1(

如何修复此问题？

Answer 1

columns.data渲染函数构建一个字符串，返回字符串：

function (o) { return 'your string here, including data value'; }

您必须(a(将您的数据变量与所需的字符串文字连接起来；和(b(使用您提供的变量名-我将使用data而不是o:

function (data) { return 'your string here, including ' + data + ' value'; }

因此，如果我们提供了渲染器中允许的所有可能的参数，就变成了：

{ 
"data": "cust_photo", 
"sortable": true, 
"render": function(data, type, row, meta) {
return '<button id="btn1" onclick="displayImage('' + data + '')">Show</button>';
}
}

我使用'来确保data变量的值用单引号括起来。

(注意在您的问题中，代码还缺少一个结束}。(

但是，为了避免排序和筛选方面的潜在问题，这些列数据呈现函数需要考虑DataTable对正交数据的使用。

type参数可用于：

{ 
"data": "cust_photo", 
"sortable": true, 
"render": function(data, type, row, meta) {
if (type === 'display') {
return '<button id="btn1" onclick="displayImage('' + data + '')">Show</button>';
} else {
return data; // type is for sorting or filtering - just use the raw value
}
}
}