DataTables add tag to column based on another attribute's value

Question

I am trying to get the <span> tag into the "salesStatusName" column cell that already has some data in it. The tag should be placed in there when the value of the last column "completelyDelivered" is true. However, I also don't want "completelyDelivered" to even be a column in the table, so I assume I somehow need to access the value of "completelyDelivered" attribute in the received JSON.

How it looks now: https://i.sstatic.net/yMNvo.png circle in a separate column

How I want it to look: https://i.sstatic.net/BVpAW.png circle within Status Name column

I looked around and there are very similar questions, but I was unable to implement any solution.

DataTables instantiation code: Note that I use AJAX and get JSON code returned

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

Lukas · Accepted Answer · 2020-01-14 15:43:21Z

I've done some research and figured it out.

Basically, if you write { "data": null }, as a definition for a column, you gain access to all properties of that row. So, in "render": function(data) function, write data["propertyName"] to get the value.

Code:

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

Collectives™ on Stack Overflow

DataTables add tag to column based on another attribute's value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related