Google spreadsheet and individual column filtering

gwill

Hello all, I need some help with this. Let me start out by saying I have very limited knowledge of what I'm doing, so i apologize for that. So here's my goal: take information from a spreadsheet published to google docs, and present it with two main features: Search and Filtering of column 0. I am so close to making this work I can taste it, every thing works the way I want it to, but my filter isn't actually filtering, it just remains a blank drop down. My guess is that the filer is happening before the processing finishes, so there is nothing to filter. I have looked into a lot of threads, but I just can't figure out how to make the filter wait until the spreadsheet is fully loaded. In any case, I really hoping someone can help me with this last peace of the puzzle and formatting everything properly so it works. Here's the code (sorry, I have no idea how to embed this properly)

$(document).ready(function() {
        $('#example').dataTable( {
            "scrollY": "400px",
            "paging":false,
            "bServerSide":false,
            "bProcessing":true,
            "sAjaxDataProp": "feed.entry",
            "sAjaxSource":  "https://spreadsheets.google.com/feeds/list/SPREADSHEET_URL/od6/public/values?alt=json",
            "aoColumns": [                 
                { "mDataProp": "gsx$0.$t" },
                { "mDataProp": "gsx$1.$t" },
                { "mDataProp": "gsx$2.$t" },
                        ],         
    } );    
        var table = $('#example').DataTable();
        table.columns(0).flatten().each( function ( colIdx ) {
            // Create the select list and search operation
            var select = $('<select />')
                .appendTo(
                    table.column(colIdx).footer()
                )
                .on( 'change', function () {
                    table
                    .column( colIdx )
                    .search( $(this).val() )
                    .draw();
                } );

            // Get the search data for the first column and add to the select list
            table
                .column( colIdx )
                .cache( 'search' )
                .sort()
                .unique()
                .each( function ( d ) {
                    select.append( $('<option value="'+d+'">'+d+'</option>') );
                } );
        });
});

Like I said the drop down shows up, but it's empty. I've looked into fnInitComplete, but again, I have no idea what I'm doing and any time I try to add that into my code, the entire table disappears. The spreadsheet it's pulling from is ~6k records, 3 cells each.

Edit: This may help http://live.datatables.net/bibiseya/1/edit?html,js,output

Thanks for any help.