Estou implementando uma dataTable no meu projeto web, ja refiz a implementaçao da dataTable varias vezes pra sanar o problema, porem sem exito. O problema é que as caracteristicas do dataTable nao funcionam na minha tabela. Como podem ver abaixo:
Ja adicionei os arquivos da dataTable no repositorio do meu projeto, baixei diretamente do DataTables.net. meu arquivo html esta assim:
#{extends 'main.html' /}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
$(document).ready(function() {
$('#tabela1').DataTable();
});
</script>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> <a href="@{Application.index}">Dashboard</a></li>
<li class="active"><i class="fa fa-user"></i> Funcionários</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">
<button type="submit" class="btn btn-success"
onclick="window.location.href='/funcionarios/formFuncionarios';">
Novo funcionário</button>
</div>
<div class="panel-body">
<input type="hidden" name="funcionario.id" value="${f?.id}" />
<table id="tabela1" class="table table-striped table-bordered table-over">
<thead>
<tr>
<th>Nome</th>
<th>Função</th>
</tr>
</thead>
<tbody>#{list items:funcionarios, as:'f'}
<tr>
<td>${f.nome}</td>
<td>${f.funcao}
<div class="pull-right action-buttons">
<a href="@{funcionarios.editarFuncionarios(f.id)}" class="edit"><span
class="glyphicon glyphicon-pencil"> Editar</span></a> <a
href="@{funcionarios.removerFuncionarios(f.id)}" class="trash"
data-toggle="confirmation" data-btn-ok-label="Sim"
data-btn-ok-class="btn-success" data-btn-cancel-label="Não"
data-btn-cancel-class="btn-danger"
data-title="Remover funcionário"
data-content="Tem certeza que deseja excluir este registro?"><span
class="glyphicon glyphicon-trash"> Remover</span></a> <a
href="@{funcionarios.detalhesFuncionarios(f.id)}" class="flag"><span
class="glyphicon glyphicon-eye-open"> Detalhes</span></a>
</div></td>
</tr>#{/list}
</tbody>
</table>
</div>
lembrando que no meu main.html ja esta referenciando os scripts usados:
<link rel="stylesheet" type="text/css" media="screen" href="@{'public/media/css/jquery.dataTables.min.css'}"/>
<script src="@{'public/javascripts/jquery-3.2.1.min.js'}"></script>
<script src="@{'public/js/custom.js'}"></script>
<script src="@{'public/media/js/jquery.dataTables.min.js'}"></script>
<script src="@{'public/media/js/dataTables.bootstrap.min.js'}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="@{'public/js/bootstrap.min.js'}"></script>
Ao inspecionar a pagina vejo este erro, so que nao localizo o erro nesse trecho de codigo.