jQuery数据表在其中一列中显示图像 [英] Jquery datatables display image in one of the columns

问题描述

我正在使用Jquery数据表，并使用Ajax从服务器获取数据.基本上，我要发送的数据是关于Order的，并且有不同类型的订单.

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.

我要实现的目的是将Order type与订单数据一起发送，并在客户端显示图像.

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.

我有两种主要类型，Surplus和Deficit.我在客户端和服务器上都拥有图像作为我的静态内容，因此我能够获取数据.我不确定如何显示它.

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

我的视图看起来像这样

<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?

推荐答案

尝试使用 columns.render 属性，以便您可以创建一个自定义函数来执行检查订单类型的逻辑，然后返回图像的正确字符串表示形式.

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.

示例(已更新，以匹配下面的评论)

在表格声明代码中，为订单类型添加一列

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

列渲染功能代码. data属性将行数据存储为对象，以便用于访问订单类型值.

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

更新:即使没有OrderType列，您仍然可以在data参数中访问对象的值.

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" />';
        }
    }

希望这会有所帮助.

这篇关于jQuery数据表在其中一列中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！