Question

我对Datatables有点麻烦，我通过Ajax加载它有时会运行，有时它不会运行，而我无法弄清楚我做错了什么......

我正在通过此处加载页面：

<%@ 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>

我也在通过此页面中的ajax加载的表单上使用jquery日历，当我浏览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

谢谢！

Answer 1

您应该在底端初始化数据表，以便您的文档正确理解和识别您的表格元素，

因为我检查了问题是缩小了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>

Grails - DataTables并不总是有效吗？

1 个答案: