在 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 插件中排序不起作用

如何替换 jQuery DataTables 中的数据数组

如何在 jQuery DataTables 中的分页期间滚动到第一行

如何遍历 DataTables jQuery 中的所有行?

jQuery DataTables 中的下拉分页