angular-datatables the deferRender not working

Question

I am using angular datatables with fnPromise and my data is about 10,000 rows also i use scrollY and i want to render only the visible rows for performence My code:

vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
            var defer = $q.defer();
            var dataPageParams = {
                columnFilters: [],
                endIdx: -1,
                startIdx: -1,
                filterParams: parentVM.filterParams,
                sortDescending: false,
                instanceID: parseData.instanceId
            };

            if (parentVM.filterId !== '') {
                dataPageParams.filterID = parentVM.filterId;
            }

            DataService.GetDataPage(dataPageParams, dataPageParams.instanceID).then(function (pageDataResult) {
                var data = pageDataResult.data.Data;
                defer.resolve(data);
            });

            return defer.promise;
        }).withLanguage(tableText)
            .withScroller()
            .withOption('scrollY', 410)
            .withOption('scrollCollapse', true)
            .withOption('deferRender', true)
            .withPaginationType('full_numbers')
            .withOption('rowCallback', rowCallback)
            .withOption('lengthMenu', [[-1, 10, 50, 100, 500], [$translate.instant("ALL"), 10, 50, 100, 500]])
            .withOption('createdRow', createdRow);

As long you are rendering the "dataTables way" i.e `datatable=""` then only visible rows will be rendered. — davidkonrad, Sep 21 '16 at 10:53
Yes, figured that out :) And that is your problem. None of dataTables optimisation features works when the whole drawing/rendering job is beeing "outsourced" to angular. — davidkonrad, Sep 21 '16 at 11:23
Nothing. Angular is an extreme bottleneck regarding performance, and you cannot optimise `ng-repeat` in conjunction with dataTables. You **must** render with dataTables if you want to boost performance. — davidkonrad, Sep 21 '16 at 11:36
i am not using ng-repeat, i am using rowRender option to set each column html My Html is: `
` — Avishai Peretz, Sep 21 '16 at 11:39

score 0 · Answer 1 · answered Oct 05 '16 at 17:54

As i am seeing, you are using the scroller plugin, this plugin in particularly, it will render the datatatable in a different way, it will render the rows in blocks larger than the value of the scrollY, when you scroll the content, and you are close to view the end of the first block, it will render a 2nd block, so, if you want to use the deferRender you will need to remove this plugin.

angular-datatables the deferRender not working

1 Answers1

Linked