Question

我正在使用Ajax data source (objects)来渲染数据表。这是json的例子：

"data": [{
    "news_id": 22,
    "news_title": "Annual function held in school",
    "news_details": "Annual function was held in school",
    "created_at": "2016-02-19 17:01:38",
    "imgurl": "uploads/images/8.JPG"
}]

现在，使用最后一个元素"imgurl"，我想在数据表的最后一列中呈现一个链接。像这样：uploads/images/8.JPG。我尝试按如下方式渲染自定义列：

$('#example').DataTable( {
        "ajax": '?r=news/ajaxdata',
        "columns": [
            { "data": "news_id" },
            { "data": "news_title" },
            { "data": "news_details" },
            { "data": "created_at" },
            { "render": function (data, type, row, meta) {
            return $('<a>')
                        .attr('href', {"data": "imgurl"})
                        .text('link')
                        .wrap('<div></div>')
                        .parent()
                        .html();
    } },

        ]
    } );

它似乎不是一种正确的方法，因为它呈现链接但href元素表示[object] [object]。我也找不到合适的文档来做到这一点。有人可以帮忙吗？

尝试了这个：

{ "render": function (data, type, row, meta) {
                var d = JSON.parse(data);
                var d = d.imgurl; 
            return $('<a>')
                        .attr('href', d)
                        .text('link')
                        .wrap('<div></div>')
                        .parent()
                        .html();

    } },

问题是处理ajax响应。

Answer 1

第一个参数data包含单元格的数据，因此它将包含图像网址uploads/images/8.JPG。

请改用以下代码：

{ 
    data: 'imgurl', //<----
    render: function (data, type, row, meta) {
        return 
           $('<a>')
              .attr('href', data)
              .text('link')
              .wrap('<div></div>')
              .parent()
              .html();
   } 
},

有关详细信息，请参阅columns.render。

使用来自ajax调用的json数据来渲染数据表中的html元素

1 个答案: