Row.add not adding to table

timface

Unfortunately I don't have test case
Debugger code (debug.datatables.net): ehidol
Error messages shown: No Error messages shown
Description of problem:

I've checked similar questions but I have been able to rectify the issue. The issue being that row.add is not adding the row.
My table initialisation is:

let dataTable = $("#accountsTable").DataTable({
            columns: [
                {
                    data: 'username',
                    render: (data, type, row, meta) => {
                        if (type === "display") {
                            return `<a href='/Users/${data}/GoogleAdmin'>${data}</a>`
                        }

                        return data
                    }
                },
                { data: 'name' },
                {
                    data: 'roleName',
                    render: (data, type, row, meta) => {
                        let returnElement = formatRoleName(row);
                        if (type === "display") {
                            if (row.isSuperAdmin) returnElement += "<i class='fas fa-globe mx-1 ms-1' title='This is a Super Admin Role'></i>"
                            if (row.isSystemRole) returnElement += "<i class='fas fa-desktop mx-1 ms-1' title='This is a System Role'></i>"
                            return returnElement
                        }
                        return data
                    }
                },
                { data: 'domain' },
                { data: 'finishDate' }
            ],
            responsive: true,
            dom: '<"toolbar">fti',
            scrollY: '55vh',
            scrollX: false,
            paging: false,
            select: {
                style: "single"
            },
            drawCallback: function (settings) {
                var api = this.api();
                $('.filterhead', api.table().header()).each(function (i) {
                    var column = api.column(i);
                    let list = $(column.header()).html() + "List";
                    var select = $(`<input list='${list}' placeholder='Filter...' />`)
                        .appendTo($(this).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                            filters.set(i, val)
                            toggleFilters()
                        }).on('click', () => event.stopPropagation());

                    let optionList = $(`<datalist id='${list}'></datalist>`)

                    column.data().unique().sort().each(function (d, j) {
                        let trimmedVal = api.column(i).search().substr(1, api.column(i).search().length - 2).replaceAll('\\', "");
                        //console.log(d + " : " + trimmedVal)
                        if (d !== trimmedVal) {
                            optionList.append('<option value="' + d + '">' + d + '</option>');
                        }
                        else {
                            optionList.append('<option value="' + d + '" selected>' + d + '</option>').prop("selected", true)
                        }
                    });
                    optionList.appendTo($(this))
                });

                getFilterList($("datalist#usernameList"), 0)
            },
            rowGroup: {
                dataSrc: "username"
            }
        });

I have code that fetches data and populates the table on load - this code works

roles.forEach(role => {
                adminTableList.push({
                    "username": role.assignedAdmin?.primaryEmail.split("@")[0] ?? role.assignedTo,
                    "firstName": role.assignedAdmin?.firstName ?? "Unknown",
                    "surname": role.assignedAdmin?.surname ?? "Unknown",
                    "name": (role.assignedAdmin?.firstName ?? "Unknown") + " " + (role.assignedAdmin?.surname ?? "User"),
                    "description": role.role.roleDescription,
                    "roleName": role.role.roleName,
                    "isSuperAdmin": role.role.isSuperAdminRole,
                    "isSystemRole": role.role.isSystemRole,
                    "domain": domain,
                    "roleAssignmentId": role.roleAssignmentId,
                    "startDate": role.startDate == null ? "No Start Date" : role.startDate.slice(0, 10),
                    "finishDate": role.finishDate == null ? "No End Date" : role.finishDate.slice(0, 10),
                    "orgUnit": role.orgUnitId
                })
            })

            $("#accountsTable").dataTable().api().rows.add(adminTableList).draw()

Then I have a form on the page to create a new role and then from the return of the role creation I pass the details to row.add and nothing happens. The code for this is:

.then((res) => {
                    //TODO common.showSuccessToast()
                    console.log(res)
                    let table = $("accountsTable").dataTable().api()
                    let newRow = table.row.add({
                        "username": res.username,
                        "firstName": res.roleAssignment.assignedAdmin.firstName,
                        "surname": res.roleAssignment.assignedAdmin.surname,
                        "name": res.roleAssignment.assignedAdmin.firstName + " " + res.roleAssignment.assignedAdmin.surname,
                        "description": res.roleAssignment.roleDescription,
                        "roleName": res.roleName,
                        "isSuperAdmin": false,
                        "isSystemRole": false,
                        "domain": domain,
                        "roleAssignmentId": res.roleAssignment.roleAssignmentId,
                        "startDate": res.startDate,
                        "finishDate": res.finishDate,
                        "orgUnit": res.orgUnit
                    }).draw().node()

I will note that there is an alert that happens after this call that fires off so I know res is coming back successfully.
Thanks in advance for your time

Cheers,
Tim

timface

Never mind, immediately after posting I realised I was missing # from the jquery selector

allan

Awesome - thanks for the update!

Allan