dataTable table does not work correctly

Question

dataTable table does not work correctly

Navigation

#1 by (1 votes)

0

I am implementing a dataTable in my web project, I have already re-implemented the dataTable several times to fix the problem, but with no success. The problem is that the dataTable features do not work in my table. As you can see below:

IalreadyaddedthedataTablefilesintherepositoryofmyproject,IdownloadeditdirectlyfromDataTables.net.myhtmlfilelookslikethis:

#{extends'main.html'/}<metahttp-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>

remembering that in my main.html is already referencing the scripts used:

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

When I inspect the page I see this error, so I can not find the error in this code.

java jquery jquery-datatables

asked by anonymous 15.07.2017 / 19:37

1 answer

pass value of a form via filter_input () SQLite duplicate registration

score 1 · Accepted Answer

Make this change in your code:

Change this line $('#tabela1').dataTable(); to this $('#tabela1').DataTable();

OBS: Your .DataTable (); this is so dataTable (); in tiny the first.

Correct code:

$(document).ready(function(){
    $('#tabela1').DataTable();
});

The DataTable function has been set to UPPERCASE in link if you call the function in lower case .dataTable(); I believe which will not work.

@Edit

Functional code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scripttype="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $('#myTable').DataTable();
});
</script>
</head>
<body>

</body>
</html>
<table id="myTable" >
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td><a href="index.php">alguma coisa</a></td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

OBS: I do not know about JS yet, but .. that's the error I found.