Index column in the listview

listview_index_column.js

/* Ever wondered how to get the nice column of letters in the right side
 * of the list view?
 * 
 * Here is an example:
 *  1. We take a list of names from a json file
 *  2. We need to sort them by either first name or last name
 *  3. We need to create a row header once in a while, when the first letter changes
 *  4. We need to create a table index
 * 
 */
 
// function taken from:
// http://stackoverflow.com/questions/979256/how-to-sort-a-json-array
var sort_by = function(field, reverse, primer){
    reverse = (reverse) ? -1 : 1;
    return function(a,b){
        a = a[field];
        b = b[field];
        if (typeof(primer) != 'undefined'){
            a = primer(a);
            b = primer(b);
        }
        if (a<b){ return reverse * -1;}
        if (a>b){ return reverse * 1;}
        return 0;
    };
};
 
// create the window
var win = Ti.UI.createWindow({
    title:'List of Names'
});
// this is the url containing 415 random names or people
var url = 'https://s3.amazonaws.com/pedruqui/tests/listofnames.json';
// create the table
var listView = Ti.UI.createListView({
    searchView:Ti.UI.createSearchBar(),
    searchHidden:true
});
listView.addEventListener('indexclick', function (e) {
	Ti.API.info(e.index);
	if(e.index == 0) {
		listView.setContentOffset({x:0, y:0});
	}
});
// add the table to the window
win.add(listView);
// open the window
win.open({modal:true})
 
//================================================================
 
// get the list of names from a json file
var xhr = Ti.Network.createHTTPClient();
xhr.onload = function(){
    // get the json and extract the name array within
    var list = JSON.parse(this.responseText).name;
    // sort by firstname
    list.sort(sort_by('firstname',false));
    // create the sections array
    var listViewSections = [];
    // this is to set a header on the rows when the first letter on the name changes
    var header = '';
    // this is for the index of the table view
    var indexes = [];
    // create the search index
    indexes.push({title:Ti.UI.iOS.TABLEVIEW_INDEX_SEARCH, index: 0});
    
    var section = null;
    var currentItems = [];
    for(var i=0, len = list.length; i < len;i++){
 
        // declare the item's title
        var rowTitle = list[i].firstname + ' ' + list[i].lastname;
 
        // create the rows
        currentItems.push({
            properties: {
                title: rowTitle,
                accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE,
                searchableText: rowTitle
            },
            template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT
        });
 
        // magic... sets the header on the items and creates the indexes for the table
        if (header != rowTitle.substr(0,1)) {
            header = rowTitle.substr(0,1);
 
            if(section != null) {
                // add the items to the current section
                section.setItems(currentItems);
                // add the section to the listView
                listViewSections.push(section);
                // create a new instance of the items array 
                currentItems = [];
            }
            // create a new section
            section = Ti.UI.createListSection({
                headerTitle: header
            });
            // populate the indexes array
            indexes.push({
                title: header,
                index: listViewSections.length
            });
            Ti.API.info('Sections ' + listViewSections.length);
        }
 
    }
    // don't forget the last items!
    section.setItems(currentItems);
    listViewSections.push(section);
    // when loop is over add the sections to the list view
    listView.sections = listViewSections;
    // and the indexes to the table
    listView.sectionIndexTitles = indexes;
};
 
xhr.onerror = function(){
    alert(this.responseText);
};
xhr.open('GET',url);
xhr.send();