javascript - 从 Json 渲染 DataTable，并修改其中一列

Question

我正在从服务器加载的 Json 文件渲染 DataTable 的行。

其中一列包含 Logo (图像)链接，但该链接不应呈现为纯文本，而应直接呈现为 Logo 。

我怎样才能做到这一点？

这是我渲染数据表的代码:

$(document).ready(function() {
    $('#osPartner').DataTable( {
        "ajax": "test2.json",
        "columns": [
            { "data": "pId" },
            { "data": "sName" },
            { "data": "lgName" },
            { "data": "logo" },
            { "data": "inc" },
            { "data": "details.teaserImage2" }
        ]
    } );
} ); 

所有数据均已加载，但“ Logo ”列是链接。如何显示该链接上的图像，而不是链接(作为文本)？是否可以修改该列，并用 html 代码包围链接，例如:

<img src="logo_url_here_that_i_become_from_jsom" alt="Mountain View" style="width:304px">

或

 logo = "<img src='"+ logo + "' alt='Mountain View' style='width:304px'>"

这是我的 json 文件的样子:

{
    "data": [
    {
        "sName": "hjp",
        "lgName": "Hi Ju Pi",
        "pId": "lap34208",
        "feat": false,
        "logo": "https://www.link-here.de/images/image1.png",
        "details": {
              "teaserImage": "https://link-here.de/mg/dsa/dev/img/image1.png",
               "teaserImage2": "https://link-here.de/mg/dsa/dev/img/image1.png"
        }
        },
        {
        "sName": "hjp2",
        "lgName": "Hi Ju Pi22",
        "pId": "ldfsdf38",
        "feat": false,
        "logo": "https://www.link2-here.de/images/image2.png",
        "details": {
              "teaserImage": "https://another-link-here.de/mg/dsa/dev/img/picture1.png",
               "teaserImage2": "https://another-link-here.de/mg/dsa/dev/img/pic2.png"
        }}
    }]

}

Answer 1

您可以使用render方法:

"columns": [
   { "data": "pId" },
   { "data": "sName" },
   { "data": "lgName" },
   { "data": "logo",
     render : function( data, type, full, meta ) {
       return type == 'display' ? '<img src="'+ data + '"/>' : data
     }
   },
   { "data": "inc" },
   { "data": "feat" }
]

您可以通过 full 获取该行的所有项目变量(如果您想为 title 设置某个 <img> 或类似变量)。