Errore su funzione DataTable

[Durex]

Mi crea gli input ma poi quando va a caricare la tabella, analizzandolo con firebug mi dice:

TypeError: $(...).DataTable is not a function
var table = $('#example').DataTable();

il mio script è DataTables.

<script type="text/javascript">
		$(document).ready(function() {
		// Setup - add a text input to each footer cell
		$('#example tfoot th').each( function () {
		console.log(this)
		var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
		} );
		// DataTable
		var table = $('#example').DataTable();
		
		console.log(this)
     
		// Apply the filter
		$("#example tfoot input").on( 'keyup change', function () {
        table
            .column( $(this).parent().index()+':visible' )
            .search( this.value )
            .draw();
		} );
		} );
</script>

la mia tabella in HTML:

<table id="example" class="tabella"> 
					<thead class="t_title">
						<tr>
							<th>Data</th>
							<th>Area</th>
							<th>Procedura</th>
							<th>Versione</th>
							<th>Pdf</th>
							<th>Zip</th>
						</tr>
					</thead>
					
					<tfoot>
						<tr>
							<th>Data</th>
							<th>Area</th>
							<th>Procedura</th>
							<th>Versione</th>
						</tr>
					</tfoot>
					
					<tbody>
						<tr>
							<td>Prova</td>
							<td>Prova</td>
							<td>Prova</td>
							<td>Prova</td>
							<td><a href=" "> <img height="50" alt="Logo Pdf" src="pdf_icon.png"></a></td>
							<td><a href=""> <img height="50" alt="Logo File" src="file_icon.png"></a></td>
						</tr>
						<tr>
							<td>Prova1</td>
							<td>Prova1</td>
							<td>Prova1</td>
							<td>Prova1</td>
							<td><a href=" "> <img height="50" alt="Logo Pdf" src="pdf_icon.png"></a></td>
							<td><a href=""> <img height="50" alt="Logo File" src="file_icon.png"></a></td>
						</tr>
						<tr>
							<td>Prova2</td>
							<td>Prova2</td>
							<td>Prova2</td>
							<td>Prova2</td>
							<td><a href=" "> <img height="50" alt="Logo Pdf" src="pdf_icon.png"></a></td>
							<td><a href=""> <img height="50" alt="Logo File" src="file_icon.png"></a></td>
						</tr>
					</tbody>
				</table>

Sapete dirmi dov'è l'errore?
grazie

 

[criric]

A me funziona, probabilmente non richiami le librerie nel modo corretto

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#example tfoot th').each(function() {
            console.log(this)
            var title = $('#example thead th').eq($(this).index()).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });
        // DataTable
        var table = $('#example').DataTable();

        console.log(this)

        // Apply the filter
        $("#example tfoot input").on('keyup change', function() {
            table
                    .column($(this).parent().index() + ':visible')
                    .search(this.value)
                    .draw();
        });
    });
</script>
<table id="example" class="tabella"> 
    <thead class="t_title">
        <tr>
            <th>Data</th>
            <th>Area</th>
            <th>Procedura</th>
            <th>Versione</th>
            <th>Pdf</th>
            <th>Zip</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Data</th>
            <th>Area</th>
            <th>Procedura</th>
            <th>Versione</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Prova</td>
            <td>Prova</td>
            <td>Prova</td>
            <td>Prova</td>
            <td><a href=" "> <img height="50" alt="Logo Pdf" src="pdf_icon.png"></a></td>
            <td><a href=""> <img height="50" alt="Logo File" src="file_icon.png"></a></td>
        </tr>
        <tr>
            <td>Prova1</td>
            <td>Prova1</td>
            <td>Prova1</td>
            <td>Prova1</td>
            <td><a href=" "> <img height="50" alt="Logo Pdf" src="pdf_icon.png"></a></td>
            <td><a href=""> <img height="50" alt="Logo File" src="file_icon.png"></a></td>
        </tr>
        <tr>
            <td>Prova2</td>
            <td>Prova2</td>
            <td>Prova2</td>
            <td>Prova2</td>
            <td><a href=" "> <img height="50" alt="Logo Pdf" src="pdf_icon.png"></a></td>
            <td><a href=""> <img height="50" alt="Logo File" src="file_icon.png"></a></td>
        </tr>
    </tbody>
</table>

 

[Durex]

Grazie infatti sbagliavo a caricare le dataTable.
Un'altra cosa, le input text della dataTable sono in basso sotto la tabella. E' possibile spostarle e posizionarle sopra?

 

[criric]

sposta la <tfoot> sopra la <thead>