0
Following the datatable documentation: https://datatables.net/examples/advanced_init/footer_callback.html, Still nothing is displayed in the footer of my table, I already checked my code 20 times and I can’t find where I am missing. Follow my jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>BI Lider</title>
<!-- Bootstrap Core CSS -->
<link href="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/bootstrap/dist/css/bootstrap.min.css" />" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/metisMenu/dist/metisMenu.min.css" />" rel="stylesheet">
<!-- DataTables CSS -->
<link href="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" />" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/datatables-responsive/css/dataTables.responsive.css" />" rel="stylesheet">
<!-- Custom CSS -->
<link href="<c:url value="/startbootstrap-sb-admin-2-1.0.5/dist/css/sb-admin-2.css" />" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/font-awesome/css/font-awesome.min.css" />" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">BI Lider</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#"><i class="fa fa-user fa-fw"></i> Meus Dados</a>
</li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Configurações</a>
</li>
<li class="divider"></li>
<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Sair</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Busca...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href="#"><i class="fa fa-sitemap fa-fw"></i> Vendas<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#">Por Supervisor <span class="fa arrow"></span></a>
<ul class="nav nav-third-level">
<li>
<a href="#">tabelas</a>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Acompanhamento por Supervisor</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Aguinaldo
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Código</th>
<th>Nome RCA</th>
<th>Meta</th>
<th>Venda</th>
<th>Perc</th>
</tr>
</thead>
<tbody>
<c:set var="perc" value="${0}" />
<c:forEach var="rca" items="${listaTeste }">
<tr class="odd gradeX">
<td>${rca.codusur }</td>
<td>${rca.nome }</td>
<td style="text-align: right"><fmt:formatNumber value="${rca.meta }" pattern="0.00" /></td>
<td style="text-align: right"><fmt:formatNumber value="${rca.venda}" pattern="0.00" /></td>
<td style="text-align: right">${rca.perc1}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/jquery/dist/jquery.min.js" />"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/bootstrap/dist/js/bootstrap.min.js" />" ></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/metisMenu/dist/metisMenu.min.js" />" ></script>
<!-- DataTables JavaScript -->
<script src="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/datatables/media/js/jquery.dataTables.min.js" />" ></script>
<script src="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" />" ></script>
<script src="<c:url value="/startbootstrap-sb-admin-2-1.0.5/bower_components/datatables-plugins/sorting/numeric-comma.js" />" ></script>
<!-- Custom Theme JavaScript -->
<script src="<c:url value="/startbootstrap-sb-admin-2-1.0.5/dist/js/sb-admin-2.js" />" ></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api();
// Update footer
$(api.column(3).footer()).html('Teste');
},
responsive: true,
"order": [3, 'desc'],
"pageLength": 25,
"language": {
"info": "Exibindo a página _PAGE_ de _PAGES_",
"infoEmpty": "Exibindo de 0 até 0 de 0 registros",
"infoFiltered": "(filtrados de _MAX_ registros totais)",
"zeroRecords": "Nenhum registro encontrado",
"lengthMenu": "Exibir _MENU_ registros",
"search": "Busca:",
"paginate": {
"first": "Primeira",
"last": "Última",
"next": "Próxima",
"previous":"Anterior"
},
},
"aoColumns": [
null,
null,
{ "sType": "numeric-comma" },
{ "sType": "numeric-comma" },
null,
],
});
});
</script>
</body>
</html>
Looking at the documentation the only difference even is in the declaration of the variable api that this different, but I don’t know if it really is that. In its this
var api = this.api();and in the documentationvar api = this.api(), data;and this supposing that it is running the datatable and only the footer that does not.– Marcelo Diniz
Oi Marcelo, then, including or not the date in the code, the information is not shown in the footer.
– JamesOrtiz