multi_filter_select problems

Hey all.

Having a few issues with my table. I want to utilise the multi filter select facility but I believe I'm slightly off. Mainly, the drop downs aren't appearing.

here is my code:

<script>

$(document).ready(function() {
	$('#Query').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "Populate_Table_overdue.php"
	} );
} );

</script>

 
 
 
 
    <style type="text/css">
      @import "/DataTables/media/css/demo_page.css";
      @import "/DataTables/media/css/demo_table.css";
    </style>
    <script type="text/javascript" language="javascript" src="/DataTables/media/js/jquery.js"></script>
    <script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
    
    <script type="text/javascript" charset="utf-8">
			(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>';
			}
			
			
			$(document).ready(function() {
				/* Initialise the DataTable */
				var oTable = $('#Query').dataTable( {
					"oLanguage": {
						"sSearch": "Search all columns:"
					}
				} );
				
				/* Add a select menu for each TH element in the table footer */
				$("tfoot th").each( function ( i ) {
					this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
					$('select', this).change( function () {
						oTable.fnFilter( $(this).val(), i );
					} );
				} );
			} );
		</script>
		
    

</head>

        <div class="clear">
        </div>
        <div class="grid_12">
            <div class="box round first fullpage">  
    
 <h2>Queries </h2>
                <div class="block ">
			
			    <div id="container">
			      <h1>Customer Table Filters</h1>
			
			      <table cellpadding="0" cellspacing="0" border="0" class="display" id="Query">
			        <thead>
			          <tr>
			            <th>Name</th>
			            <th>Address</th>
			            <th>Postcode</th>
			            <th>telephone</th>
			            <th>mobile</th>
			            <th>mobiletwo</th>
			            <th>email</th>
			            <th>nservice</th>
			            <th>nservicemonth</th>
			            <th>DaysOverdue</th>
			          </tr>
			        </thead>
			       
			       
				<tfoot>
					<tr>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
					</tr>
				</tfoot>
			      </table>