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 or

Answer 1

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.