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.

我有两种主要类型，盈余和赤字.我有两个图像作为客户端和服务器的静态内容，我能够获取数据.我不确定如何显示它.

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屋！