Question

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

我想要实现的是在Order type中发送订单数据，在客户端显示图像。

我有两种主要类型，Surplus和Deficit。我有两个图像作为我在客户端的静态内容，从服务器我能够获取数据。我不知道如何显示它。

这是我从服务器获取数据的方式

$('#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>

关于如何做到这一点的任何想法或例子？

Answer 1

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

示例（已更新以匹配以下评论）

在您的表格声明代码中添加订单类型

的列

$('#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属性将行数据存储为对象，因此使用该属性来访问订单类型值。

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

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

希望这会有所帮助。

Answer 2

您可以通过这种方式轻松添加图片：

$('#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数据表在其中一列中显示图像

2 个答案: