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

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

我想要实现的是订单类型和订单数据一起发送,并在客户端显示图像.

我有两种主要类型,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>

关于如何做的任何想法或例子？

解决方法

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

示例(更新以匹配以下评论)

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

$('#matchOrderedTable').dataTable({
    "ajax": {
        "url": TippNett.Api.Url + "Match/DataTable",{ "data": "OrderLoc",render: getImg },{ "data": "OrderMatchLoc",render: getImg }
    ]
});

列渲染功能代码. data属性将行数据存储为对象,因此使用它来访问订单类型值.

更新：即使OrderType没有列,您仍然可以访问数据参数中的对象值.

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

解决方法

猜你在找的jQuery相关文章