Select menu column filtering problem

I am using DataTables in a Laravel project and trying to implement select menu column filtering with AJAX data. I am super close but getting hung up on one hopefully small item. Using the Benedikt Forchhammer plug-in.

(function($) {
		/*
		 * Function: fnGetColumnData
		 * Purpose:  Return an array of table values from a particular column.
		 * Returns:  array string: 1d data array
		 * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function
		 *           int:iColumn - the id of the column to extract the data from
		 *           bool:bUnique - optional - if set to false duplicated values are not filtered out
		 *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
		 *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
		 * Author:   Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>
		 */
		$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
		    // check that we have a column id
		    if ( typeof iColumn == "undefined" ) return new Array();
		     
		    // by default we only want unique data
		    if ( typeof bUnique == "undefined" ) bUnique = true;
		     
		    // by default we do want to only look at filtered data
		    if ( typeof bFiltered == "undefined" ) bFiltered = true;
		     
		    // by default we do not want to include empty values
		    if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
		     
		    // list of rows which we're going to loop through
		    var aiRows;
		     
		    // use only filtered rows
		    if (bFiltered == true) aiRows = oSettings.aiDisplay;
		    // use all rows
		    else aiRows = oSettings.aiDisplayMaster; // all row numbers
		 
		    // set up data array   
		    var asResultData = new Array();
		     
		    for (var i=0,c=aiRows.length; i<c; i++) {
		        iRow = aiRows[i];
		        var aData = this.fnGetData(iRow);
		        var sValue = aData[iColumn];
		         
		        // ignore empty values?
		        if (bIgnoreEmpty == true && sValue.length == 0) continue;
		 
		        // ignore unique values?
		        else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
		         
		        // else push the value onto the result data array
		        else asResultData.push(sValue);
		    }
		     
		    return asResultData;
		}}(jQuery));
		 
		function fnCreateSelect( aData )
		{
		    var r='<select><option value=""></option>', i, iLen=aData.length;
		    for ( i=0 ; i<iLen ; i++ )
		    {
		        r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
		    }
		    return r+'</select>';
		}

		var oTable;
		$(document).ready(function() {
				oTable = $('#users').dataTable( {
				"sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
				"sPaginationType": "bootstrap",
				"oLanguage": {
					"sLengthMenu": "_MENU_ records per page",
				},
				"bProcessing": true,
		        "bServerSide": true,
		        "sAjaxSource": "{{ URL::to('admin/users/data') }}",
		        "fnDrawCallback": function ( oSettings ) {
	           		$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
	     		}
			});

			/* Add a select menu for each TH element in the table footer */
		    $("tfoot th").each( function ( i ) {
		    	/* alert(i) */
		        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
		        $('select', this).change( function () {
		            oTable.fnFilter( $(this).val(), i );
		        } );
		    } );
		});

The above code renders the select menus with just the empty option and no additional data, UNLESS I run an alert

alert(i)

in which case they work correctly and return the proper menus. Can someone explain why that is?

Thanks!