datatable take too long when rendering about 300 rows that contain some conditions in angularjs

Viewed 73

I'm using angular-datatables component to show data as grid in my AngularJs project.

But a problem that I encountered is when I added a operation column that contain some link to delete , update and so on , it decrease rendering rows speed so that for show only 300 rows , it takes about 8 seconds.

this is what I do to show that column:

DTColumnBuilder.newColumn('id').withTitle($filter('translate')('GLOBAL.ACTIONS')).notSortable().withOption('width', '5%')
    .renderWith((data, type, full, meta) => {
        let editBtn     = <button ng-click="edit(${full.id})" permission permission-only="'EDIT_PLAN'" ng-if="${full.is_owner && !full.confirmed}" class='btn btn-outline-info'><span class='icon mdi mdi-pencil'></span></button>,
            delBtn      = <button class='btn btn-outline-danger' ng-click='delete(${full.id})' permission permission-only="'DEL_PLAN'" ng-if="${full.is_owner && !full.confirmed}"><span class='icon mdi mdi-delete'></span></button>,
            activeBtn   = <button ng-click="changeStatus(${full.id}, 1)" permission permission-only="'ACTIVE_PRODUCTION_PLAN'" ng-if="${full.is_owner && !full.confirmed && !full.is_active}" class='btn btn-outline-success' uib-tooltip="{{'GLOBAL.DO_ACTIVE' | translate}}"><span class='icon mdi mdi-check'></span></button>,
            deActiveBtn = <button class='btn btn-outline-secondary' ng-click='changeStatus(${full.id}, 0)' permission permission-only="'ACTIVE_PRODUCTION_PLAN'" ng-if="${full.is_owner && !full.confirmed && full.is_active}" uib-tooltip="{{'GLOBAL.DO_INACTIVE' | translate}}"><span class='icon mdi mdi-close'></span></button>;

        return <div class='btn-group'>${delBtn + editBtn + activeBtn + deActiveBtn} </div>;
    })

As you can see there are many conditional blocks based on user permissions. Because the user may have different permissions and I do not show some operartion links base her/his permisstions.

When I comment code of this column all things work fine and only when return this code , rendering take too long.

0 Answers
Related