Third Column doesn´t write when added a row to datatable

rafa_jesus_netsigma

I'm updating the table with this script, but in the third column it doesn't write anything.
data.description is not empty because it is written in the second column, it should be written in the third as well.

var addRow = function (data) {
    if (!datatable) return;

    var deleteButton = document.createElement('button');
    deleteButton.type = 'button';
    deleteButton.className = 'btn btn-icon btn-active-light-primary w-30px h-30px';
    deleteButton.innerHTML = `
    <i class="ki-duotone ki-trash fs-3">
        <span class="path1"></span>
        <span class="path2"></span>
        <span class="path3"></span>
        <span class="path4"></span>
        <span class="path5"></span>
    </i>`;

    // Atribuir a função de clique ao botão
    deleteButton.addEventListener('click', function () {
        if (dotNetReferenceCode) {
            dotNetReferenceCode.invokeMethodAsync('HandleDeleteClick', data.code, data.id)
                .then(() => {
                    console.log('Método C# invocado com sucessosss.');
                }).catch(err => {
                    console.error('Erro ao invocar o método C#:', err);
                });
        } else {
            console.error("dotNetReferenceCode não foi inicializado corretamente.");
        }
    });

    var updateButton = document.createElement('button');
    updateButton.type = 'button';
    updateButton.className = 'btn btn-icon btn-active-light-primary w-30px h-30px me-3';
    updateButton.innerHTML = `
    <i class="ki-duotone ki-setting-3 fs-3">
        <span class="path1"></span>
        <span class="path2"></span>
        <span class="path3"></span>
        <span class="path4"></span>
        <span class="path5"></span>
    </i>`;
    updateButton.setAttribute('data-bs-target', '#kt_modal_update');

    // Atribuir a função de clique ao botão
    updateButton.addEventListener('click', function () {
        if (dotNetReferenceCode) {
            dotNetReferenceCode.invokeMethodAsync('HandleEditClick', data)
                .then(() => {
                    console.log('Método C# invocado com sucesso.');
                }).catch(err => {
                    console.error('Erro ao invocar o método C#:', err);
                });
        } else {
            console.error("dotNetReferenceCode não foi inicializado corretamente.");
        }
    });

    var buttonContainer = document.createElement('div');
    buttonContainer.className = 'text-end';
    buttonContainer.appendChild(updateButton);
    buttonContainer.appendChild(deleteButton);

    var formattedDate = formatDate(data.createdAt);

    // Adicionar a linha ao DataTable
    var newRow = datatable.row.add([
        data.code,
        data.description,
        data.description,
        formattedDate,
        buttonContainer
    ]).draw(false).node();

    $(newRow).prependTo(datatable.table().body());
}

this is the html structure of the table:

<tr>
    <td class="p-3">@item.Code</td>
    <td class="p-3">@item.Description</td>
    <td class="p-3">@item.Description</td>
    <td class="text-end p-3">@item.CreatedAt</td>
    <td class="text-end">
        <button class="btn btn-icon btn-active-light-primary w-30px h-30px me-3"
                data-bs-toggle="modal" data-bs-target="#kt_modal_update"
                @onclick="@(() => HandleEditClick(item))">
            <i class="ki-duotone ki-setting-3 fs-3">
                <span class="path1"></span>
                <span class="path2"></span>
                <span class="path3"></span>
                <span class="path4"></span>
                <span class="path5"></span>
            </i>
        </button>
        <button class="btn btn-icon btn-active-light-primary w-30px h-30px" data-kt-table-filter="delete_row" @onclick="@(async () =>
                                                                                                                   {
                                                                                                                       if (item.Code != null)
                                                                                                                       {
                                                                                                                           await HandleDeleteClick(item.Code, item.Id);
                                                                                                                       }
                                                                                                                   })">
            <i class="ki-duotone ki-trash fs-3">
                <span class="path1"></span>
                <span class="path2"></span>
                <span class="path3"></span>
                <span class="path4"></span>
                <span class="path5"></span>
            </i>
        </button>
    </td>
</tr>

kthorngren

I think you are asking specifically about this part of the code:

    // Adicionar a linha ao DataTable
    var newRow = datatable.row.add([
        data.code,
        data.description,
        data.description,
        formattedDate,
        buttonContainer
    ]).draw(false).node();
 
    $(newRow).prependTo(datatable.table().body());

$(newRow).prependTo(datatable.table().body());

The row.add() will add the row to the table. Don't use $(newRow).prependTo( ... ) to add to the table as Datatables won't know about this row. Remove this statement. Is the row added properly with row.add()?

Kevin

rafa_jesus_netsigma

No, the problem continue.
I was using this

$(newRow).prependTo(datatable.table().body()); 

to add the row to the first position of the table

kthorngren

to add the row to the first position of the table

Datatables won't know about this row and it will disappear on the next table draw.

There isn't anything obvious in your code that would indicate why the third column is empty. Can you provide a link to your page or a test case replicating this issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I built a simple test case using a portion of your code:
https://live.datatables.net/fivedana/1/edit

The test case works properly. Please update my test case or provide a link showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rafa_jesus_netsigma

Probably is just a bug, i tried in another table and worked there.