在 jQuery DataTables 中的 Ajax 请求之后在 td 中添加 html 元素
Posted
技术标签:
【中文标题】在 jQuery DataTables 中的 Ajax 请求之后在 td 中添加 html 元素【英文标题】:Add html element within td after Ajax request in jQuery DataTables 【发布时间】:2016-01-04 18:29:00 【问题描述】:从 ajax 获得响应后,我想在 td 中添加 html 元素。
结果将类似于:
<tr>
<td class="mycus-class" data-title="abc"><span class="mycus-class2">XYZ</span></td>
<td class="mycus-class" data-title="ghi"><span class="mycus-class2">GKL</span></td>
.....
</tr>
【问题讨论】:
太宽泛了。我们不知道 ajax 是否绑定到插件。需要付出更多努力来概述您的问题,尤其是涉及复杂插件时 【参考方案1】:使用render()
函数非常简单,这里有一个小演示:
var data = [
firstName: 'john', lastName : 'doe'
]
var table = $('#example').DataTable(
data : data,
columns : [
data : 'firstName',
render : function(data, type, row)
return '<span class="mycus-class2">'+data+'</span>'
,
data : 'lastName'
]
)
http://jsfiddle.net/e9be48oq/
您可以在一次调用中定位多个列:
columnDefs : [
targets : [0,3,4,5],
render : function(data, type, row)
return '<span class="mycus-class2">'+data+'</span>'
]
【讨论】:
@chotesah,如果对您有帮助,请考虑接受答案。【参考方案2】: "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull)
console.log(aData[1]);
if (aData[1] == "Imported")
// $('td').css('background-color', '#FBE9E7');
$(nRow).find('td:eq(1)').addClass('label label-success');
else if (aData[1] == "Inactive")
$(nRow).find('td:eq(1)').addClass('label label-danger');
else if(aData[1] == "Exported")
$(nRow).find('td:eq(1)').addClass('label label-primary');
else
$(nRow).find('td:eq(1)').html('<span class="label label-default">'+aData[1]+'</span>');
// $.addClass('label label-default');
,
【讨论】:
以上是关于在 jQuery DataTables 中的 Ajax 请求之后在 td 中添加 html 元素的主要内容,如果未能解决你的问题,请参考以下文章
带有 DataTables 的表中的外部链接(jQuery 插件)
在 jquery 中的 DataTables 插件中排序不起作用