DataTable call not working
DataTable call not working
rcockell
Posts: 4Questions: 1Answers: 0
Hi everyone,
i have a jsp page that has an Ajax request to a controller (Java /Spring).
My controller get some data from a data base and generates a third jsp, which contains a code for a table, and return that part of jsp code to the first jsp, the one that had sent the Ajax request.
I did all the links for both the css/js and still my table isn't being stylized.
Could you guys please give me some help?
Following the code:
aud_outbound.jsp (Ajax request)
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="${pageContext.request.contextPath}/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/resources/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/resources/dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script type="text/javascript">
var ajaxMenu = null;
function carregarMenu(method, url, type){
if (window.ActiveXObject) ajaxMenu = new ActiveXObject('Microsoft.XMLHTTP');
else if (window.XMLHttpRequest) ajaxMenu = new XMLHttpRequest();
if(ajaxMenu != null){
ajaxMenu.open(method,url,type);
ajaxMenu.onreadystatechange = statusAjaxMenu;
//inicia o tranporte
ajaxMenu.send(null);
}
};
function statusAjaxMenu(){
if(ajaxMenu.readyState == 4 && ajaxMenu.status == 200){
retornoAjaxMenu(ajaxMenu.responseText);
}
};
function retornoAjaxMenu(response){
document.getElementById("divMenu").innerHTML = response;
};
</script>
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
<jsp:include page="../estrutura/header.jsp"/>
<!-- Left side column. contains the logo and sidebar -->
<jsp:include page="../estrutura/sidebar.jsp"/>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" id="pricipal">
<!-- Content Header (Page header) -->
<!--<section class="content-header">
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Home</li>
</ol>
</section> -->
<section class="content">
<div id="divMenu"></div>
</section>
</div><!-- /.content-wrapper -->
<!-- Main Footer -->
<jsp:include page="../estrutura/footer.jsp"/>
<script src="${pageContext.request.contextPath}/resources/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/jQuery/jquery-migrate-1.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click', '.btn-dropbox', function(e){
e.preventDefault();
var term = $(this).closest('tr').find('.terminal').text();
var cnt = $(this).closest('tr').find('.conta').text();
var dtch = $(this).closest('tr').find('.dtExecCc').text();
var hrch = $(this).closest('tr').find('.hrChamada').text();
//recCasoAud(term, cnt, dtch, hrch);
recCasoAud(term, cnt, dtch, hrch);
//alert(term);
});
});
function recCasoAud(term, cnt, dtch, hrch){
//alert('slcdAudCase.htm?term='+ term +'&cnt=' + cnt + '&dtch=' + dtch + '&hrch=' + hrch);
carregarMenu('get','slcdAudCase.htm?term='+ term +'&cnt=' + cnt + '&dtch=' + dtch + '&hrch=' + hrch, false)
};
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#tblAud').DataTable();
});
</script>
</body>
</html>
<script type="text/javascript">
carregarMenu('get','load.htm', true);
</script>
Controller
@RequestMapping(value="/load", method=RequestMethod.GET)
public @ResponseBody ModelAndView getTblAudCases(Model model){
model.addAttribute("auditorias", audDao.slcCases());
return new ModelAndView("/auditoria/tbl_aud_cases");
}
tbl_aud_cases (jsp response)
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<table id="tblAud" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Terminal</th>
<th>Conta</th>
<th>Documento</th>
<th>Login Op</th>
<th>Dt Exec CC</th>
<th>Hr Chamada</th>
<th>Ultimo Retorno</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Terminal</th>
<th>Conta</th>
<th>Documento</th>
<th>Login Op</th>
<th>Dt Exec CC</th>
<th>Hr Chamada</th>
<th>Ultimo Retorno</th>
</tr>
</tfoot>
<tbody>
<c:forEach var="aud" items="${auditorias}">
<tr>
<td class='terminal'>${aud.terminal}</td>
<td class='conta'>${aud.conta}</td>
<td class='documento'>${aud.documento}</td>
<td class='loginOp'>${aud.loginOp}</td>
<td class='dtExecCc'>${aud.dtExecCc}</td>
<td class='hrChamada'>${aud.hrChamada}</td>
<td class='ultimoRetorno'>${aud.ultimoRetorno}</td>
<td><button class="btn-dropbox">Auditar</button></td>
</tr>
</c:forEach>
</tbody>
</table>
Thanks in advance!
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I bet it is a timing issue. the Datatables call is triggering before that other data renders.
ThomD, I've tried to make the Ajax call sync but still not working.
Thank's for the reply!
Don't make the Ajax call sync. That's just not a good idea. Better to hook your datatables call into the onReadyStateChange of the last ajax call.
For testing purposes, move the contents of tbl_aud_cases into the main file Get a simple setup working before you start chaining together dependencies.
in you debugger, put a break point on line 95 and prove that the table exists before dataTables is invoked.
You were right! I've moved the contents to the main page and the DataTable was invoked.
But i still don't get the "onReadStateChage" part, could you put this on a example for me? Sorry, but I'm don't have much experience in js...
Remember, the "A" in "Ajax" is for asynchronous. You sent the Ajax call off to do something and the JS moves on the next bits of your code. Using $(document).ready is not what you want, because your page is "ready" (as far as JQuery is concerned) long before that Ajax call comes back with the results that you need.
This
needs to be removed and the DataTable part moved to here
This way datatables doesn't get invoked until the Ajax call is done and has populated that div.
This works perfectly! Thank you so much for your help ThomD!!!