# Lazy loading parts of a collection bound to an table view > Titanium alloy example. Look at readme.md

readme.md

Lazy loading parts of a collection bound to an table view

Titanium alloy example.

Using the dataFilter function to lazy load parts of the collection that is bound to a tableView, adding 10 more at a time to be displayed. uses a single collection bound to tableView

The filterFunction calls collection.first(numberTableRowsDisplayed). This var numberTableRowsDisplayed is incremented when user gets to bottom of the table. Uses alloy widgets: nl.fokkezb.dynamicScrolling to increment the number of rows to be displayed and then trigger change on the collection, when user gets to the bottom of the TableView. nl.fokkezb.pullToRefresh to get more json data from web datasource.

Links: https://github.com/FokkeZB/nl.fokkezb.dynamicScrolling https://github.com/FokkeZB/nl.fokkezb.pullToRefresh

listView.js

var common = require('common');

var pullToRefresh, scrollCtrl;
var numberTableRowsDisplayed = 10;
var postsCollection = Alloy.Collections.post;

function filterFunction(collection) {
     return collection.first(numberTableRowsDisplayed);  
}


postsCollection.comparator = function(model) {
  // the minus is important to reverse the order for the comparator, flip ascending descending.
  return -model.get('date');
};


function loadMoreRows(_callback) {
    numberTableRowsDisplayed = numberTableRowsDisplayed+10;
    postsCollection.trigger('change');

    if(OS_IOS) {
        if (typeof(_callback) !== "undefined"){
            Ti.API.info('about to finish load more rows');
            _callback();

        }
    }
}

function refreshFeed(_callback) {
    Ti.API.info('BEGINNING refresh feed');
    common.getFacebookFeed(postsCollection);
    common.getTwitterFeed(postsCollection);
    common.getBlogFeed(postsCollection,"get_recent_posts");
 
    postsCollection.trigger('change');
    
    if(OS_IOS) {
        if (typeof(_callback) !== "undefined"){
            Ti.API.info('about to finish pull to refresh');
            pullToRefresh.date = moment();
            _callback();

        }
    }

}

function init(){
    // init calls
    if(OS_IOS) {
        pullToRefresh = Alloy.createWidget("nl.fokkezb.pullToRefresh", null, {
            table: $.postsTable,
            backgroundColor: "#EEE",
            fontColor: "#AAA",
            indicator: "dark",
            image: "/images/ptrArrow.png",
            loader: refreshFeed,
            msgUpdating: "Checking for new feeds"
        });


        scrollCtrl = Alloy.createWidget('nl.fokkezb.dynamicScrolling', null, {
            table: $.postsTable,
            loader: loadMoreRows
        });
    }
   if(OS_IOS) {
        refreshFeed();
    }   
}

init();

listView.xml

<Alloy>

  <Collection src="post"/>
    <Window id="window" class="container">
        <TableView id="postsTable" dataCollection="post" dataTransform="transformFunction" dataFilter="filterFunction" onClick="rowClicked" >	
            <Require src="row"/>
        </TableView>
    </Window>	

</Alloy>