Just once concern with implementing in Angularjs

[LamaBimal]

I have multiple table templates in a single Page. Could we use the same clusterize directive for the multiple table using the single scope Variable.

[NeXTs]

I don't see why not

[LamaBimal]

Hello NeXTs, I want to ask if i have thousands rows of data at a time in single scope in angularjs.Does Clusterize work in this scenario to load the few data and load later on scroll down. Please be confirm whole data already binded with some variable.

[NeXTs]

You mean some kind of "lazy loading" data from server while scrolling down?

You could affect data as you need with functions .append(), .preped(), .update(). See datails in docs

[Thrilleratplay]

I have used Clusterize.js to do "lazy loading"/"infinite scrolling" in a custom Angular.js directive. This fiddle has the basic structure of what you would need. The same directive was used multiple times on the same page with different sets of data. Trigger a function that fetches more data when it the user scrolls to the end. The addition to the directive would be something like this:

// Content - Wrapper element (Clusterize.js "Content area")
var contentDiv = elem[0].querySelector('div.clusterize-scroll');

angular.element(contentDiv).on('scroll', function() {
  if (contentDiv.scrollTop >= contentDiv.scrollHeight - contentDiv.clientHeight && typeof $scope.onLastRow === 'function') {
    // Fires on last row
    $scope.yourAwesomeFunctionToFetchMoreData();
  }
});

[LamaBimal]

hello Thrilleratplay , the fiddle[http://jsfiddle.net/thrilleratplay/s1y3780x/] u have provided is much better , but i am totally confusing why are u using clusterize html function and while implementing this function in my scenario it doesnot work. and in my case rows are created by ng-repeat in the html file.Please reply asap.

[Thrilleratplay]

This has to do with the order and level at which Angular.js directives are compiled. I cannot remember the exact reasoning behind this but I think it is because Clusterize will try to virtualize existing table rows and the replaced in the DOM outside of the binding of Angular.js. Whatever the case, in general, the directive in the fiddle is a wrapper for Clusterize.js. Clusterize manipulates HTML in the DOM using vanilla javascript; outside of the Angular hooks and binding.

There are two ways around this

1. Strongly Suggested Skip the ngRepeat and instead create a function that basically does the same thing. Convert the raw data into an array of HTML table rows and update or append on changes. Side note, if you have a large number of rows, updating (refreshing the entire table) will hurt performance as opposed to appending new rows to the existing table.
2. Hacky but has use cases Move the ngRepeat from the template and instead it into the table as a Javascript string insert it using Clusterize update. I have not done this ngRepeat and you will likely run into problems with Clusterize not virtualizing everything correctly as it won't know about the new rows compiled by Angular. This is more useful when you are using components or transcluding templates.

[LamaBimal]

Hello NexTs, I faced one problem, i am trying to use the directive in a loop does it need unique id for each and how could i maintain it if i import template from the next html file.. And could i synced the tbody column width on the basis of thead column size?

[Thrilleratplay]

@LamaBimal If you are using scrollId and contentId, those are element IDs and must be unique for the entire DOM. If you are reusing the same directive with the same template, I would suggest using scrollElem and contentElem selecting the elements by class.

scrollElem: elem[0].querySelector('.clusterize-scroll'),
contentElem: elem[0].querySelector('.clusterize-content')

Here is an example fiddle

[LamaBimal]

Thanx alot. @Thrilleratplay