Estou tentando trabalhar com Datatable JS da jQuery para o meu projeto a partir deste link.
Baixei a biblioteca completa da mesma fonte. Todos os exemplos fornecidos no pacote parecem funcionar bem, mas quando tento incorporá-los no meu WebForms
, o CSS, JS não funcionam de forma alguma.
Aqui está o que eu fiz:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<!-- table body -->
</tbody>
</table>
</div>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
</form>
</body>
</html>
Minha estrutura de arquivo para JS e CSS em minha solução é a seguinte:
Eu adicionei todas as referências JS e CSS necessárias, conforme mostrado no manual. Ainda assim, a renderização não é a esperada. Não há CSS e nem mesmo o JS funciona.
Também recebo os seguintes erros no console:
ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function
Eu ainda não limitei nenhum dado dinâmico aqui (como dentro de um repetidor ou algo assim) ainda não está funcionando.
Alguém pode me orientar na direção certa para este problema?