vertical scroll freeze while updating datatable

ak2022

I have table which have 600 data, 2 columns are hidden for filtering and grouping(using row grouping plugin). Updating table using ajax every 15 sec.
Below are the codes to update the cell.

for (var i = 0; i < totalCnt; i++) {
var rowIndex = empTable.row('#' + data[i].empId);
empTable.cell(rowIndex, 1).data(data[i].name);
empTable.cell(rowIndex, 2).data(data[i].age);
empTable.cell(rowIndex, 3).data(data[i].salary);
empTable.cell(rowIndex, 4).data(data[i].address);
empTable.cell(rowIndex, 5).data(data[i].phone1);
empTable.cell(rowIndex, 6).data(data[i].phone2);
Util.updateMarker(data[i]);
}
After calling the above code table gets frozen and scroller stops for some moment. I am updating the user location in the same iteration.

ak2022

empTable = $('#empTable')
                .DataTable({                     
                    "paging": false,
                    "order": [
                        [8, 'asc']
                    ],
                    "rowGroup": {
                        // Uses the 'row group' plugin
                        dataSrc: "group_name",
                        startRender: function(rows, group) {
                            var collapsed = !!collapsedGroups[group];

                            rows.nodes().each(function(r) {
                                r.style.display = '';
                                if (collapsed) {
                                    r.style.display = 'none';
                                }
                            });

                            // Add category name to the <tr>. NOTE: Hardcoded colspan
                            var toggleClass = collapsed ? 'fa-plus-square' : 'fa-minus-square';

                            // Add group name to <tr>
                            return $('<tr/>')
                                .append('<td colspan="' + rows.columns()[0].length + '">' + '<span class="fa fa-fw ' + toggleClass + ' toggler"/> ' + group + ' (' + rows.count() + ')</td>')
                                .attr('data-name', group)
                                .toggleClass('collapsed', collapsed);
                        }
                    },
                    "rowId": 'deviceId',
                    "lengthChange": false,
                    "language": {
                        search: "_INPUT_",
                        searchPlaceholder: "Search Vehicle"
                    },
                    "rowCallback": function(row, data, dataIndex) {

                        if (role == 'ADMIN') {
                            $(row).css('background-color', 'green');
                        } else if (role == 'USER') {
                            $(row).css('background-color', 'red');

                        } else if (role == 'SUBUSER') {
                            $(row).css('background-color', 'gray');

                        } else{
                            $(row).css('background-color', 'orange');

                        }

                    },

                    "dom": '<"pull-left"f><"pull-right"l>tip',
                    "columnDefs": [{
                        "targets": [7, 8],
                        "visible": false,
                        "searchable": true
                    }],
                    "columns": [{
                        data: null,
                        className: "center",
                        "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                            $(nTd).html("<input onClick='SideInfo.getDetails(this);' id='d_" + oData.id + "' checked='" + oData.checked + "' type='checkbox' >");
                        }
                    },
                    {
                        "data": "name"
                    },
                    {
                        "data": "age"
                    },
                    {
                        "data": "salary"
                    },
                    {
                        "data": "address"
                    },
                    {
                        "data": "phone1"
                    },
                    {
                        "data": null,
                        "render": function(obj, type, row, meta) {
                            return "<button type='button' id='detailBtn' class='btnClass' onClick='dashboard.openEmpDetail(this);'><i class='fa fa-ellipsis-v' style='color: #967adc; font-size: 26px; '></i></button>";
                        }
                    }, {
                        "data": "role"
                    },
                    {
                        "data": "group_name"
                    }
                    ]


                });

colin

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

ak2022

Hi Colin,

Thanks for your response. we are adding data to the table using our internal API, due to code privacy, can not share all details here.

Please help