Datatable Angular way - img - Lazy load - fnRowCallback

[nuxwin]

Hello ;

I'm new in the Angular world and I fail on something which could seem easy... We have used datatable with jQuery for years now but we want now use angular-datatable. A problem we are facing is when each datatable row has an img. We use the angular way (needed for us). We have a template such as:

<div class="aps" ng-app="aps_standard" ng-controller="apsPackageCtrl as controller">
    <table datatable="ng" dt-options="controller.dtOptions">
        <thead>
        <tr>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="package in ::controller.packages">
            <td>
                <div>
                    <div class="aps_logo">
                        <a href="?aps_action=details&id={{ package.id }}">
                            <img ng-src="{{ package.icon_url }}" alt="{{ package.name }}" />
                        </a>
                    </div>
                    <div class="aps_description">
                        <h4>
                            <a href="?aps_action=details&id={{ package.id }}">
                                {{ package.name + ' - ' + package.version  }}
                            </a>
                        </h4>
                        {{ package.summary }}
                    </div>
                    <div class="aps_details">
                        <a href="?aps_action=details&id={{ package.id }}">{TR_DETAILS}</a>
                    </div>
                </div>
                <div>
                    <div class="aps_version">
                        APS
                        <b>{{ package.aps_version }}</b>
                    </div>
                    <div class="aps_info">
                        <span ng-if="package.package_cert != 'none'">Certified</span>
                        {TR_CATEGORY}: <b>{{ package.category }}</b>
                        {TR_VENDOR}: <a href="{{ package.vendor_uri }}">{{ package.vendor }}</a>
                    </div>
                    <div class="aps_status">
                        <button><b>{TR_LOCK}</b></button>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

The problem here is that when we load ~ 300 rows, the images are all loaded when the template is compiled, even when the rows are not showed yet. The question here is quick simple: How to implement lazy-loading for images? I think about a custom Angular directive such as ngLazySrc which should hold the real img src and replace the src when the row get showed but I don't really know on which event I must listen and also where I should implement the event listener...

Currently, my angular module look like this:

var aps_standard = angular.module('aps_standard', ['datatables', 'ngResource']);

aps_standard.controller('apsPackageCtrl', apsPackageCtrl);
aps_standard.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);

function apsPackageCtrl($resource, DTOptionsBuilder) {
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('simple');

    $resource('aps_packages.php', { aps_action: 'getPackages' }).query().$promise.then(function (packages) {
        vm.packages = packages;
    });
}

The datatable look like this:

Thanks you for your help.

[l-lin]

Have you tried using the deferRender option?

[nuxwin]

@l-lin

As I understand, that option is relevant when you're using ajax rendering. We are using angular rendering because our rows are not simple. Is there a way to use the ajax rendering with inline templates?

[l-lin]

Use the columns.render option.
There is an example on the documentation.

[ksobon]

@l-lin the link to the "documentation" is dead. Can you refresh it?

[l-lin]

Here: https://l-lin.github.io/angular-datatables/archives/#!/bindAngularDirective