jQuery Datatables显示html内容

cbwuti44  于 2023-05-06  发布在  jQuery
关注(0)|答案(6)|浏览(189)

我的页面上有一个jquery datatable,它使用服务器端处理来检索数据。在本例中,其中一列包含html内容,因此我的服务器响应如下所示:

"aaData": [ [1, "aaa", "<span class="myclass">html here</span>" ], ...

我试着

"aoColumnDefs": [ "aTargets":[2], "sType": "html" }

但我仍然看到单元格内容,就好像它是普通字符串一样。我能做什么?

55ooxyrt

55ooxyrt1#

制作了一个工作版本

"aoColumnDefs": [ 
    { "aTargets": [2], 
      "sType": "html", 
      "fnRender": function(o, val) { 
          return $("<div/>").html(o.aData[2]).text();
      } 
    }
]

用jQuery解码回html。

ni65a41a

ni65a41a2#

我更新了SamuGG的答案,对于新的数据表版本:

"aoColumnDefs": [ {
                     "aTargets": [ 5 ],
                     "mRender": function ( data, type, full ) {
                      return $("<div/>").html(data).text(); 
                      }
            } ]
u4dcyp6a

u4dcyp6a3#

你只需要在rawColumns()或make(true)之前添加下面一行

->escapeColumns('aaData')

使用此方法并传递列名

nom7f22z

nom7f22z4#

var renderAsHtml = function (data, type, full) {
return decHTMLifEnc(data);
}; 
var isEncHTML = function(str) {
    if(str.search(/&amp;/g) != -1 || str.search(/&lt;/g) != -1 || str.search(/&gt;/g) != -1)
        return true;
    else
        return false;
};

var decHTMLifEnc = function(str){
    if(isEncHTML(str))
        return str.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
    return str;
}

将renderAsHtml作为函数引用传递给fnRender。这也是作品

4ioopgfo

4ioopgfo5#

这是我在datatable列中呈现HTML标签的方式:

ajax: "getData?userobjid=<%=session.getAttribute("userobjectid")%>&alpha=&selectsuppliersflag="+selectsuppliersflag,
columns: [
            { data:  null, render: function ( data, type, row ) {
                if(data.storeFrontUrl == 'undefined' || data.storeFrontUrl==null){
                        return "<label>"+data.companyName+"</label>";
                         }
                        else{
                        return "<a href='JavaScript:newPopup(\"directorylist/view/"+data.storeFrontUrl+"\");'>"+data.companyName+"</a>";
                     }
                    }},
0qx6xfy6

0qx6xfy66#

在render函数上添加.text()

render: function(data, type, sop, meta) {
         var sutsut = '<div class="text-wrap width-200">' + sop.info + '</div>';
        return $(sutsut).text();                                            
           }

相关问题