Jquery数据表在其中一列中显示图像答案

【问题标题】：Jquery datatables display image in one of the columnsJquery数据表在其中一列中显示图像
【发布时间】：2021-04-10 22:13:43
【问题描述】：

我正在使用 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>

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

【问题讨论】：

订单类型是否与您的网格数据一起返回？
是的，它确实与网格数据一起发送。
您不应该返回每一行的订单类型，以便您可以使用 JavaScript 来确定要在列中显示的图像吗？
是的，这就是我正在做的事情。但不确定如何在客户端操作它。
很好，我很困惑，因为你说的是发送。无论如何，您需要在列中使用render 属性并返回<img /> 标记的字符串表示形式。我将提供一个示例作为答案，希望可以从那里开始工作

标签： jquery datatables

【解决方案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" />';
        }
    }

希望这会有所帮助。

【讨论】：

您好，感谢您的解决方案。我试过了，它正在工作。唯一的问题是我不想要一个单独的订单类型列。我想将它与 OrderLoc 和 OrderMatchLoc 连接起来。
然后我会更新我的答案以删除 OrderType 列，让我知道它是否正确并适合您

【解决方案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 }
    ]
});

【讨论】：