DataTables добавляют тег в столбец на основе значения другого атрибута.

Question

Я пытаюсь получить тег <span> в ячейку столбца "salesStatusName", в которой уже есть некоторые данные. Тег должен быть помещен туда, когда значение последнего столбца "completelyDelivered" равно true. Однако я также не хочу, чтобы "completelyDelivered" был даже столбцом в таблице, поэтому я предполагаю, что мне как-то нужно получить доступ к значению атрибута "completelyDelivered" в полученном JSON.

Как это выглядит теперь: 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 },
        ],
    });

Answer 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 },
        ],
    });