DataTables 根据另一个属性的值向列添加标签答案

【问题标题】：DataTables add tag to column based on another attribute's valueDataTables 根据另一个属性的值向列添加标签
【发布时间】：2023-03-15 06:55:01
【问题描述】：

我正在尝试将<span> 标记放入已经包含一些数据的"salesStatusName" 列单元格中。当最后一列"completelyDelivered" 的值为真时，应将标记放置在其中。但是，我也不希望 "completelyDelivered" 成为表中的一列，所以我假设我需要在接收到的 JSON 中访问 "completelyDelivered" 属性的值。

现在的样子： https://i.imgur.com/S171i2o.png 在单独的列中圈出

我希望它看起来如何： https://i.imgur.com/74nCnGu.png 状态名称列中的圆圈

我环顾四周，有非常相似的问题，但我无法实施任何解决方案。

DataTables 实例化代码：请注意，我使用 AJAX 并返回 JSON 代码

$(document).ready(function () {
    $.fn.dataTable.moment('MM-DD-YYYY');

    var datatableObj = $('#salesOrdersTable').DataTable({
        "ajax": {
            "url": "/Orders/GetAll",
            "type": "GET",
            error: function (error) {
                RedirectUserToErrorPage();
            }
        },
        "columns": [
            { "data": "salesOrderNumber" },
            { "data": "salesOrderNumber" },
            { "data": "poNumber" },
            { "data": "orderDateString" },
            { "data": "company" },
            { "data": "salesPerson" },
            { "data": "salesStatusName" },
            { "data": "completelyDelivered" }
        ],
        "columnDefs": [
            {
                "targets": 0, //salesOrderNumber col
                "orderable": false, 
                "render": function (data) {
                    return '<input type="button" value="+" onclick="location.href=\'/Shipments/Get?salesOrderNumber=' + data + '\'">';
                }
            },
            {
                "targets": 7, //completelyDelivered col
                "render": function (data) {
                    if (String(data) == "true") {
                        return '<span class="SalesOrderDelivered">⬤</span>';                           
                    }
                    return "";
                }
            },
            { className: "salesOrderNumber", "targets": 1 },
        ],
    });

【问题讨论】：

标签： html json ajax datatables

【解决方案1】：

我做了一些研究并弄清楚了。

基本上，如果您将{ "data": null }, 写为列的定义，您就可以访问该行的所有属性。所以，在"render": function(data)函数中，写data["propertyName"]来获取值。

代码：

$(document).ready(function () {
    $.fn.dataTable.moment('MM-DD-YYYY');

    var datatableObj = $('#salesOrdersTable').DataTable({
        "ajax": {
            "url": "/Orders/GetAll",
            "type": "GET",
            error: function (error) {
                RedirectUserToErrorPage();
            }
        },
        {"data": "salesOrderNumber",},
            { "data": "salesOrderNumber" },
            { "data": "poNumber" },
            { "data": "orderDateString" },
            { "data": "company" },
            { "data": "salesPerson" },
            { "data": null, },//this is Sales Status column.
                //"data: null" accesses all JSON data. We need this so that in "columnDefs" section
                //we can use the values of both "completelyDelivered" and "salesStatusName" properties.
        ],
        "columnDefs": [
            {
                "targets": 0, //button col
                "orderable": false,
                "render": function (data) {
                    return '<input type="button" value="+" onclick="location.href=\'/Shipments/GetShipments?salesOrderNumber=' + data + '\'">';
                }
            },
            {
                "targets": 6, //Sales Status col. 
                "render": function (data) { //This is where we can use values of "completelyDelivered" and "salesStatusName" JSON properties.
                    if (String(data["completelyDelivered"]) == "true") {
                        return (String(data["salesStatusName"]) + '<span class="AllDelivered">&nbsp;&nbsp;&nbsp;⬤</span>');
                    } else {
                        return String(data["salesStatusName"]);
                    }
                }
            },
            { className: "salesOrderNumber", "targets": 1 },
        ],
    });

【讨论】：