Conditional column rendering only works on active page

azizanbps

Hello,

I seek help. I have a DataTable having two columns that, depending on the flag's value, will display its corresponding icon.

DataTable is initialized as below:

$(`#${_form.name}-table`).DataTable({
    "ajax": {
        "url": `call-to-api`,
        "dataSrc": ``
    },
    "columns": [
        {
            "data": `id`,
            "render": function (data, type, row) {
                return `
                    <a href="#" class="btn btn-sm btn-primary edit-entry">
                        <span class="id-data">${data}</span>
                        <i class="fas fa-spinner fa-spin ml-1 d-none"></i> 
                    </a>
                `;
            }
        },
        {
            "data": `name`,
            "createdCell": function (td, cellData, rowData, row, col) {
                $(td).addClass(`name-data`);
            }
        },
        {
            "data": `isEnable`,
            "createdCell": function (td, cellData, rowData, row, col) {
                $(td).addClass(`isEnable-data`);
            }
        },
        {
            "data": `hasNotification`,
            "createdCell": function (td, cellData, rowData, row, col) {
                $(td).addClass(`hasNotification-data`);
            }
        }
    ],
    "columnDefs": [
        {
            "className": `text-center align-middle`,
            "targets": `_all`
        },
        {
            "render": function (data, type, row) {
                return data
                    ? `<i class="fas fa-2x fa-check-circle text-success">`
                    : `<i class="fas fa-2x fa-times-circle text-danger">`;
            },
            "targets": [2, 3]
        }
    ],
    "createdRow": function (row, data, dataIndex) {
        $(row).attr(`id`, `${_form.name}-${data.id}`);
    },
    "drawCallback": function (settings) {
        $(`.edit-entry`).unbind();
        $(`.edit-entry`).click(function () {
            getRecord($(this).parents(`:eq(1)`).attr(`id`).split(`-`)[1]);
        });
    }
});

Upon successful insertion, I would add the new data as below

$(`#${_form.name}-table`).DataTable().row.add(
    $(`
        <tr>
            <td>${data.id}</td>
            <td>${data.name}</td>
            <td>${data.isEnable}</td>
            <td>${data.hasNotification}</td>
        </tr>
    `)
).node().id = `${_form.name}-${data.id}`;
$(`#${_form.name}-table`).DataTable().draw();

The expected outcome would be that, the isEnable and hasNotification columns should display icon according to its value, e.g. if isEnable is true then it will display check-circle icon, otherwise it will display times-circle icon.

However, I noticed it only works on first/active page. If the new row is added in a non-active page (page that is not currently displayed), these two columns will always display the check-circle icon, regardless if its actual value is false.

I tried finding solutions but I just don't know what keywords to search.

Hope someone can shed some light.

colin

You're defining columns and columnDefs - this means that one of those values will be over-written with the other. Try using one of the other, but not both. And if still no success, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

azizanbps

Hello Mr. Colin,

I have tried using just one of either columns and columnDefs, unfortunately it didn't solve the problem. As suggested, I've made a test case to replicate the issue. The original uses AJAX sourced data though.

http://live.datatables.net/hobufepu/1/edit?js,output

To reiterate, the issue is when I add a new row, the newly created row will display as if the values for "isEnable" and "hasNotification" columns were set to true, even though actual values were set to false. (See function addRow in test case).

Edited: Originally, the issue only occurred when the added row was not added in the first page / active page. However, for this test case, the issue would still occur even if the added row was on the first page / active page.

kthorngren

You are adding the row like this:

    table.row.add(
        $("<tr><td>" + id + "</td><td>" + name + "</td><td>" + isEnable + "</td><td>" + hasNotification + "</td></tr>")
    ).node().id = id;

The isEnable and hasNotification object types are string not boolean. You can adjust your if statement to check for both boolean true and string "true"`. This example shows the type is a string for added rows.

Or you can just add the values using a Javascript array, like this:
http://live.datatables.net/qusugika/1/edit

Kevin

azizanbps

Wow.. I don't know why I was under the impression the value would retain as boolean within a string. Your answer solved my problem, thank you very much