datalist/collection pagination

edited February 2014 in Enyo 2.4
Hello,

I've just recently started investigating all the new data binding in enyo 2.3/4. I am working with fairly large datasets (several thousand), and so pagination is necessary - pull down data from the server as it is scrolled to. I've been easily doing this with the flyweight repeater and backbone collections with enyo 2.2. Is there a way to do this with the datalist and collection in 2.4? I've been looking through the source without luck.

Thanks!

Comments

  • DataList will do the data loading for you as pages. See http://enyojs.com/docs/2.4.0-pre.1/api/#enyo.Source and http://enyojs.com/docs/2.4.0-pre.1/api/#enyo.DataList -- the idea is you define how the collection loads your data via AJAX or other means, then the DataList will wait to ask for records until they're needed, which allows the source to do its own paging.

    https://github.com/enyojs/moon-flickr/blob/master/source/views/views.js has an example, look at the model, collection, and source definitions at the end of the file.

  • Thanks for your response. I think I'm missing something. In the moon-flickr app, I would like to be able to do an infinite scroll of pictures. But the current app will only show you the first 50. For example when I search for "alps", it shows a list of 50 pictures. When it gets to the end of those 50 pictures it stops. But if I look at the response from flickr it says there are 23706 pictures in the results. I don't want to download all 23706 pictures at once. Instead, I want to download the first 50, when I get close to the end of those, I download the next 50. Datalist paginates the display to screen, but it doesn't paginate the download of data from the server. I guess i should have said I'm looking for lazy data download.

    My collection should say it has 23706 items in it after I do the first fetch, but only items 0-49 are downloaded to the machine. If I skip down to item 5403, when the datalist tries to bind to that item, the collection should fire a request to the source to download items 5400-5449. I have scoured the source for DataList and Source, and cannot figure out how to do this.
  • edited May 2014
    Maybe I am giving an answer too late but I recently faced similar problem and I want to share an example on how I solved it with others who are facing the same problem.

    Lets say that you have a RESTful web service which manages contacts and is listening at http://phonebook.com/ws . Your endpoint in your router for getting paginated resources -such as contacts- looks like this /contacts/(page/:pageNo) such as contacts/page/5. Parenthesis denotes that is not mandatory to exist a page path with number if you are fetching the first page or you provide no paginated data as well.

    Now in your contacts collection you should have a page property and you should utilize the getUrl function to return a custom url which supports the server pagination. Also on fetch method you should check the opts argument for existence of the page property as well and set it as collection's property in every new fetch.

    Maybe what I wrote sounds confusing so here is an example:

    enyo.kind({ name: "phonebook.contacts.Collection", kind: enyo.Collection, page: 0, url: "contacts", urlRoot: "http://phonebook.com/ws", fetch: function(opts) { if (opts && opts.page) { this.page = opts.page; delete opts.page; } this.inherited(arguments); }, getUrl: function() { // check if exists: url, page and page is a number(even stringified) if (this.url && this.page && +this.page == this.page) { return this.url + "/page/" + this.page; } else { // The framework will take care to build the url without pagination. return false; } } });
    Now you can even initialize a collection pointing to any page you like -if ever needed-. e.g. :

    contactsCollection = new phonebook.contacts.Collection({page:4}); contactsCollection.fetch({success: .., fail: ....}); //http://phonebook.com/ws/contacts/page/4
    Also you are able to fetch the next page in that instance by passing a new page number in the fetch options:

    contactsCollection.fetch({page:5, success: ..., fail: ...}); //http://phonebook.com/ws/contacts/page/5
Sign In or Register to comment.