datatable does not work properly

Asked

Viewed 2,054 times

0

I am implementing a datatable in my web project, I have repeated the implementation of the datatable several times to remedy the problem, but without success. The problem is that the datatable features do not work in my table. As you can see below: inserir a descrição da imagem aqui

I’ve already added the datatable files to my project repository, downloaded directly from Datatables.net. my html file is like this:

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

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 inspecting the page I see this error, but I can’t find the error in this code snippet.

java jquery

  • Open your browser console and see if it returns any errors

1 answer

1


Make that change to your code:

Exchange that line $('#tabela1').dataTable(); for that $('#tabela1').DataTable();

OBS: Your . Datatable(); this so-called datatable(); the first lowercase.

Correct code:

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

The function Datatable was defined as UPPERCASE in https://datatables.net/ if you call the function in lower case .dataTable(); I don’t think it will 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>
<script type="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: don’t know about JS yet, but.. that’s the mistake I found.

  • I had already put Datatable before and tbm didn’t work. :(

  • 1

    @Carlosdiego put a functional code for you to compare with yours, and see if there’s something wrong. I did some tests, and it’s working as dataTable(); also, good.. the way is you keep trying until someone who has knowledge of JS comes here ^^.

  • It worked Nicolas, obgdo

Browser other questions tagged java jquery

You are not signed in. Login or sign up in order to post.