jQuery DataTables ajax format data

Question

Is it possible to format the Ajax data before inserting it into the page using the DataTables sAjaxSource": "URL"?

I'm currently fettching the following JSON array:

{
    "aaData": [
        {
            "Name": "Trident",
            "Link": "http://google.com"
        }
    ]
}

I can insert it into the Name and Link into the dataTable using:

var oTable = $('#example').dataTable({
    "bProcessing": true,
    "sAjaxSource": "sources/myData.json",
    "sAjaxDataProp": "items",
    "aoColumns": [
        { "mData": "Name" },
        {"mData": "$Link" }
    ]
});

however, I want to insert it as a single Anchor element with the Text= Name and the href = Link. Is this possible?

PS: what have I tried: I looked throw the examples and searched with google but found nothing.

So you want 1 column instead of 2? But as an anchor?

wirey00
– wirey00

2013-01-04 14:55:06 +00:00
Commented Jan 4, 2013 at 14:55 — wirey00
– wirey00, Commented Jan 4, 2013 at 14:55

Codesleuth · Accepted Answer · 2013-01-04 15:11:31Z

3

I'm a veteran of the old fnRender method, but I believe it is now done like so with mRender:

var oTable = $('#example').dataTable({
    "bProcessing": true,
    "sAjaxSource": "sources/myData.json",
    "sAjaxDataProp": "items",
    "aoColumns": [
        //{ "mData": "Name" },
        { "mData": "Link",
          "mRender": function (data, type, full) {
              return '<a href="' + full[1] + '">' + full[0] + '</a>';
          } }
    ]
});

PS: I edited this to reflect your comment clarifying that you wanted it in a single column. Uncomment the line { "mData": "Name" }, to add the name column back in. Also remember your table definition should also be changed for one or two columns.

edited Jan 4, 2013 at 15:11

answered Jan 4, 2013 at 15:04

Codesleuth

10.6k8 gold badges54 silver badges72 bronze badges

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

2 Comments

Stefan Over a year ago

Great, but is it ok if I skip the mRender function and use a function as mData? ("mData": function (source, type, val) { return '<a href="' + source.Href + '">' + source.$name + '</a>'; })

Codesleuth Over a year ago

I was wondering that myself. I've been stuck using an older version for a long time so I am new to the mData property and the extent of what it can do. My worry is the function you posted will get escaped to text instead of being printed as HTML output - all I can say is try it and see.

Collectives™ on Stack Overflow

jQuery DataTables ajax format data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related