Jquery datatables display image in one of the columns

Question

I am using Jquery data tables and getting the data from server using Ajax. Basically the data I am sending is about an Order and there are different types of orders.

What I am trying to achieve is send in the Order type along with the order data and on the client side display an image.

I have two main types, Surplus and Deficit. I have both images as my static content on the client side and from server I am able to get the data. I am not sure how to display it.

This is how I get data from server

$('#matchOrderedTable').dataTable({
    "ajax": {
        "url": TippNett.Api.Url + "Match/DataTable",
        "data": function (d) {
            d.token = authToken;
        }
    },
    "columns": [
        { "data": "Created" },
        { "data": "Amount" },
        { "data": "OrderOrg" },
        { "data": "OrderMatchedOrg" },
        { "data": "OrderLoc" },
        { "data": "OrderMatchLoc" },
    ]
});

and my View looks like this

<table id="matchOrderedTable">
    <thead>
        <tr>
            <th>@Texts.Created</th>
            <th>@Texts.Amount</th>
            <th>@Texts.Organizations</th>
            <th>@Texts.MatchedOrg</th>
            <th>@Texts.Locations</th>
            <th>@Texts.MatchedLoc</th>
        </tr>
    </thead>
</table>

Any ideas or examples on how to do that?

Shouldn't you be returning the order type for each row so you can then use JavaScript to determine what image to display in the column? — Will.Harris, Jan 22 '16 at 09:54
Yes that is what I am doing. But not sure how to manipulate it on client end. — mohsinali1317, Jan 22 '16 at 10:11
Good, I was getting confused because you were saying send. Anyway you will need to use the `render` property in your column and return a string representation of the `` tag. I will provide an example as an answer and hopefully can get it working from there — Will.Harris, Jan 22 '16 at 10:17

Will.Harris · Accepted Answer · 2016-01-26T12:53:49.487

Try using the columns.render property so that you can create a custom function to do your logic for checking the order type and then return the correct string representation of your image.

Example (updated to match comment below)

In your table declaration code add a column for the order type

$('#matchOrderedTable').dataTable({
    "ajax": {
        "url": TippNett.Api.Url + "Match/DataTable",
        "data": function (d) {
            d.token = authToken;
        }
    },
    "columns": [
        { "data": "Created" },
        { "data": "Amount" },
        { "data": "OrderOrg" },
        { "data": "OrderMatchedOrg" },
        { "data": "OrderLoc", render: getImg },
        { "data": "OrderMatchLoc", render: getImg }
    ]
});

Column render function code. The data property stores the row data as an object so use that to access the order type value.

UPDATE: even though there is no column for OrderType you can still access the object's value in the data param.

function getImg(data, type, full, meta) {
        var orderType = data.OrderType;
        if (orderType === 'Surplus') {
            return '<img src="image path here" />';
        } else {
            return '<img src="image path here" />';
        }
    }

Hopefully that helps.

Hey, Thanks for the solution. I tried and it is working. The only issue is that I don't want a separate column for Order Type. I want to concatenate it with the OrderLoc and OrderMatchLoc. — mohsinali1317, Jan 26 '16 at 11:02
I'll update my answer to remove the `OrderType` column then, let me know if its correct and works for you — Will.Harris, Jan 26 '16 at 12:42

score 1 · Answer 2 · answered Apr 10 '21 at 14:13

You can easily add image this way:

$('#matchOrderedTable').dataTable({
    "ajax": {
        "url": TippNett.Api.Url + "Match/DataTable",
        "data": function (d) {
            d.token = authToken;
        }
    },
    "columns": [
        { "data": "Created" },
        { "data": "Amount" },
        { "data": "OrderOrg" },
        { "data": "OrderMatchedOrg" },
        { data: 'OrderLoc',render: function (data, type, row, meta) {
                return '<img src="' + data + '" height="50" width="50"/>';
              }
            },
        { "data": "OrderMatchLoc", render: getImg }
    ]
});

Jquery datatables display image in one of the columns

2 Answers2

Linked