Datatable Angular way - img - Lazy load - fnRowCallback
See original GitHub issueHello ;
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.
Issue Analytics
- State:
- Created 8 years ago
- Comments:5 (3 by maintainers)
Top GitHub Comments
@l-lin the link to the “documentation” is dead. Can you refresh it?
Use the columns.render option. There is an example on the documentation.