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

我使用Ajax data source (objects)来渲染数据表。这里是例子JSON：使用来自ajax的json数据调用渲染数据表中的html元素

"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元素说[对象] [对象]。我无法找到正确的文档来执行此操作。任何人都可以帮忙吗？

尝试这样做：

{ "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响应。

来源

2016-03-05 Ramesh Pareek

刚打这个。看来datatables render函数只接受一个字符串返回值，并将其视为原始HTML。但是，这甚至没有记录。我很惊讶它不会接受一个DOM元素而不会将其渲染为“[object]”。我有一种感觉，鉴于各地发布的例子，那里有很多不正确的HTML转义噩梦。 – Jason

第一个参数data包含单元格的数据，因此它将具有图像URL 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。

来源

2016-03-05 20:22:51

但我只想使用ajax响应的“数据”：“imgurl”部分。这不起作用。 –

@RameshPareek - 已更新gyrocodes答案，他只是忘记了重要的'数据'参考（dataTables如何知道'数据'通过，如果'数据'没有被设置？） - 猜他专注于'render'部分因为它很明显，所以你也必须定义'data'。希望能帮助到你。尽管有点混乱，我认为陀螺仪的回答正确。 – davidkonrad

@davidkonrad，是的。但是当我向我介绍正确的文档时，我发现了这一点。：）谢谢。 –

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

回答

相关问题