datatable does not work properly

Question

datatable does not work properly

Asked 7 years, 5 months ago

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:

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.

Open your browser console and see if it returns any errors

– usuario

2017/07/15 at 22:01

1 answer

Browser other questions tagged java jquery

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

by Nicolas Guilherme Matheus • **502** points · Answer 1 · 2017-07-15T18:14:13+00:00

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.