Return jQuery 来自 DataTables 呈现函数的对象
Return jQuery object from DataTables render function
我想在 render
函数中 return 一个 jQuery 对象。由于这似乎不可能,下面的代码与我得到的一样接近。
这是可以接受的解决方案吗?什么时候调用 type type
?我似乎无法在文档中找到有关它的任何信息。
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A']
];
$('#example').dataTable( {
columns: [
{
"title": "Engine",
"className": "foo",
"render": function ( data, type, row, meta ) {
var $td = $('#example').DataTable().cell(meta.row, meta.col).nodes().to$();
if(type === 'type'){
var $a = $('<a href="#"/>').data({ data: row }).text('foo');
$td.html($a);
}
return data;
},
},
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "className": "center" },
{ "title": "Grade", "className": "center" }
],
data: dataSet
});
当为 render option, DataTables will call render 指定函数时,函数多次针对它需要的不同数据类型 - 排序、过滤和显示。
此外,根据文档:
The return value from the function is what will be used for the data
requested.
所以您需要 return 一个字符串(不是 jQuery 对象),它将包含请求的操作类型的数据。
如果你想用jQuery构造一个link,当type
等于[=13=时,你需要returnHTML字符串],请参阅下面的代码摘录:
"render": function ( data, type, row, meta ) {
if(type === 'display'){
return $('<a href="#"/>')
.text('foo')
.wrap('<div></div>')
.parent()
.html();
} else {
return data;
}
},
更新:
使用 jQuery data()
将数据分配给元素没有意义,因为我们 returning HTML 字符串而不是 jQuery目的。在下面的示例中,我演示了如何在单击 link 时访问行数据。
$('#example tbody').on('click', 'a', function(){
// Get row data
console.log($('#example').DataTable().row($(this).closest('tr')).data());
});
请参阅 this JSFiddle 进行演示。
我想在 render
函数中 return 一个 jQuery 对象。由于这似乎不可能,下面的代码与我得到的一样接近。
这是可以接受的解决方案吗?什么时候调用 type type
?我似乎无法在文档中找到有关它的任何信息。
var dataSet = [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A']
];
$('#example').dataTable( {
columns: [
{
"title": "Engine",
"className": "foo",
"render": function ( data, type, row, meta ) {
var $td = $('#example').DataTable().cell(meta.row, meta.col).nodes().to$();
if(type === 'type'){
var $a = $('<a href="#"/>').data({ data: row }).text('foo');
$td.html($a);
}
return data;
},
},
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "className": "center" },
{ "title": "Grade", "className": "center" }
],
data: dataSet
});
当为 render option, DataTables will call render 指定函数时,函数多次针对它需要的不同数据类型 - 排序、过滤和显示。
此外,根据文档:
The return value from the function is what will be used for the data requested.
所以您需要 return 一个字符串(不是 jQuery 对象),它将包含请求的操作类型的数据。
如果你想用jQuery构造一个link,当type
等于[=13=时,你需要returnHTML字符串],请参阅下面的代码摘录:
"render": function ( data, type, row, meta ) {
if(type === 'display'){
return $('<a href="#"/>')
.text('foo')
.wrap('<div></div>')
.parent()
.html();
} else {
return data;
}
},
更新:
使用 jQuery data()
将数据分配给元素没有意义,因为我们 returning HTML 字符串而不是 jQuery目的。在下面的示例中,我演示了如何在单击 link 时访问行数据。
$('#example tbody').on('click', 'a', function(){
// Get row data
console.log($('#example').DataTable().row($(this).closest('tr')).data());
});
请参阅 this JSFiddle 进行演示。