2016-10-20 3 views
0

У меня проблемы с Datatables, я загружаю его через Ajax, и он работает иногда, а иногда это не так, и я не могу понять, что я делаю неправильно.Grails - DataTables не всегда работает?

я загружаю страницу через здесь:

<%@ page contentType="text/html;charset=UTF-8" %> 
<html> 
    <head> 
     <meta name="layout" content="main" /> 
     <title>Cadastrar Aluno</title> 
     <g:javascript library="jquery"/> 
    </head> 
    <body> 
     <br><br> 
     <input type="button" value="Novo" onClick="carregar('/aluno/novo', 'divForm')"/> 
     <input type="button" value="Pesquisar" onClick="carregar('/aluno/pesquisar', 'divForm')"/>   
     <input type="button" value="E" onClick="carregar('/aluno/teste', 'divForm')"/>   
     <div id="divForm">   
      <g:render template="form"></g:render> 
      </div>  
     </body> 
    </html> 

и это то, что я нагрузка:

<script src="https://code.jquery.com/jquery-1.12.3.js"> 
</script>  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /> 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"> 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#datatable').dataTable(); 
    }); 
</script> 


<table id="datatable"> 
    <thead> 
     <tr> 
      <th>RA</th> 
      <th>Nome</th> 
      <th>Telefone</th> 
      <th>Cod. Barras</th>   
      <th>Turma</th> 
      <th>Unidade</th> 
      <th>Curso</th> 
      <th>Ações</th> 
     </tr> 
    </thead> 
    <tbody> 
     <g:each var="aluno" in="${listaAluno}"> 
      <tr> 
       <td>${aluno.ra}</td> 
       <td>${aluno.nome}</td> 
       <td>${aluno.telefone}</td> 
       <td>${aluno.cod_barras}</td> 
       <td>${aluno.turma}</td> 
       <td>${aluno.unidade}</td> 
       <td>${aluno.curso}</td> 
       <td> 
        <g:link action="editar" controller="aluno" params="[id:aluno.id]">Editar</g:link> 
        <g:link onClick="remover('/aluno/remover', 'divForm', '${aluno.nome}')">Excluir</g:link> 
        <input type="hidden" value="${aluno.id}" id="id_aluno"/> 
       </td> 
      </tr> 
     </g:each> 
    </tbody> 
</table> 

Я также использую календарь JQuery в форме, который загружается через AJAX на этой странице тоже, и он перестает работать, когда я иду, хотя шаблон datatables и этот :

<script type="text/javascript"> 
    $(function() { 
    $("#nascimento").datepicker({ 
    showOn: "button", 
    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
    buttonImageOnly: true 
    }); 
    }); 

</script> 
<g:uploadForm name="formulario" controller="aluno" action="salvar"> 
~~ Fields ~~ 
    <div class="right-div"> 
      <label>Data de Nascimento:</label>  
      <input type="text" name="nascimento" id="nascimento" required="true" value="<g:formatDate format="dd-MM-yyyy" date="${aluno?.nascimento}"/>"/>   
    </div> 
~~ Fields ~~ 
</g:uploadForm> 

Если это помогает, вот все файлы, связанные: https://www.dropbox.com/sh/xvyyj57kqonsw4b/AABBCQF9Tty_ztkSh6SSRVXUa?dl=0

Спасибо!

ответ

0

Вы должны инициализировать DataTable в нижней части, чтобы ваш документ понять и определить ваш элемент таблицы правильно,

Как я проверил, что проблема была с уменьшенной JS заменить JS с нормальным, как:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" /> 
<script src="https://code.jquery.com/jquery-1.12.3.js"></script> 

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"> 

В теле

<table id="datatable"> 
    <thead> 
     <tr> 
      <th>RA</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Data</td> 
     </tr> 

    </tbody> 
</table> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#datatable').dataTable(); 
    }); 
</script> 
+0

пробовал, то же самое .. иногда это работает, иногда это не – xSlok

+0

любой вид Aler t показывает, если не проверить, поступают ли ваши данные json с сервера, проверьте консоль firebug? –

+0

Я использовал firebug, и это было показано на консоли «TypeError: $ (...). DataTable не является функцией», когда tabledate не работал, и когда это было сделано, это было показано «TypeError: $ (. ..). Маска не является функцией. « – xSlok

Смежные вопросы