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
– Will.Harris, Commented Jan 22, 2016 at 9:54
Yes that is what I am doing. But not sure how to manipulate it on client end. — mohsinali1317
– mohsinali1317, Commented Jan 22, 2016 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 <img /> tag. I will provide an example as an answer and hopefully can get it working from there — Will.Harris
– Will.Harris, Commented Jan 22, 2016 at 10:17

Will.Harris · Accepted Answer · 2016-01-26 12:53:49Z

10

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.

edited Jan 26, 2016 at 12:53

answered Jan 22, 2016 at 10:27

Will.Harris

4,0143 gold badges27 silver badges38 bronze badges

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

2 Comments

mohsinali1317 Over a year ago

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.

Will.Harris Over a year ago

I'll update my answer to remove the OrderType column then, let me know if its correct and works for you

Md Amranur Rahman · Accepted Answer · 2021-04-10 14:13:43Z

1

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 }
    ]
});

answered Apr 10, 2021 at 14:13

Md Amranur Rahman

1,14317 silver badges30 bronze badges

Collectives™ on Stack Overflow

Jquery datatables display image in one of the columns

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related