using json data from ajax call in rendering html elements in datatables

Question

I'm using Ajax data source (objects) for rendering datatables. here is the example 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"
}]

now, using last element "imgurl", I want to render a link in the last column of the datatables. like this one:uploads/images/8.JPG. I tried rendering a custom column as follows:

$('#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();
    } },

        ]
    } );

It does not seem to be a proper way to do as it renders a link but the href element says [object][object]. I couldn't find the right documentation to do this either. can anybody help?

tried this:

{ "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();

    } },

the problem is to handle the ajax response.

Just hit this. It seems the datatables render function will accept only a string return, and that is treated as raw HTML. However, that is not even documented. I am surprised it will not accept a DOM element without rendering it as "[object]". I have a feeling, given the examples published everywhere, there is much incorrect HTML escaping nightmares out there. — Jason
– Jason, Commented Apr 7, 2016 at 16:31

davidkonrad · Accepted Answer · 2016-03-06 03:35:26Z

4

First argument data holds data for the cell so it will have image URL uploads/images/8.JPG.

Use the code below instead:

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

See columns.render for more information.

edited Mar 6, 2016 at 3:35

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

answered Mar 5, 2016 at 20:22

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ramesh Pareek Over a year ago

but I want to use only the "data":"imgurl" part of the ajax response. this does not work.

davidkonrad Over a year ago

@RameshPareek - have updated gyrocodes answer, he just forgot the important data-reference (how should dataTables know which data to pass, if data not is set?) - guess he focused on the render part because it is so obvious that you have to define data too. Hope it helps. I think gyrocode have answered correct despite this little confusion.

Ramesh Pareek Over a year ago

@davidkonrad, yes. but I figured it out as he referred me to the right documentation. :) thanks.

Collectives™ on Stack Overflow

using json data from ajax call in rendering html elements in datatables

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related