how to load dataTables data upon clicking a button
how to load dataTables data upon clicking a button
ytrlp
Posts: 1Questions: 1Answers: 0
I am trying to use dataTables and load the data upon clicking a button. So here is the jsp below. But when I click the button I see the alert but the table is is undefined and there is no load to the table data.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Inbal UI</title>
<link rel="stylesheet" type="text/css"
href="static/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css"
href="static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="static/css/jquery.dataTables_themeroller.css" />
<script type="text/javascript" language="javascript"
src="static/js/jquery.js"></script>
<script type="text/javascript" language="javascript"
src="static/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var table = $('#fileInfoTable').DataTable({
data : [],
"order" : [ [ 0, "asc" ] ],
columns : [ {
data : "fileId"
}, {
data : "fileName"
}, {
data : "sentDate"
}, {
data : "direction"
}, {
data : "interfaceType"
}, {
data : "buisnessLine"
}, {
data : "vaultName"
}, {
data : "manageCompony"
}, {
data : "lastActivity"
}, {
data : "lastActivityStatus"
}, {
data : "feedbackName"
}, {
data : "feedbackDate"
}, {
data : "processDate"
}, {
data : "eventsAmount"
}, {
data : "goodEventsAmount"
}, {
data : "sourceId"
} ]
})
$('button').on('click', function() {
alert("button click:" + table.id);
table.ajax.url("api/file/loadAll").load();
})
});
</script>
</head>
<body>
<button id="loadData">load data</button>
<div class="container" id="container">
<div class="page-header">
<h1>
<center>
<spring:message code="fileInfo.header" />
</center>
</h1>
</div>
<table id="fileInfoTable" class="display">
<!-- Header Table -->
<thead>
<tr>
<th><spring:message code="fileInfo.fileId" /></th>
<th><spring:message code="fileInfo.fileName" /></th>
<th><spring:message code="fileInfo.sentDate" /></th>
<th><spring:message code="fileInfo.direction" /></th>
<th><spring:message code="fileInfo.interfaceType" /></th>
<th><spring:message code="fileInfo.buisnessLine" /></th>
<th><spring:message code="fileInfo.vaultName" /></th>
<th><spring:message code="fileInfo.manageCompony" /></th>
<th><spring:message code="fileInfo.lastActivity" /></th>
<th><spring:message code="fileInfo.lastActivityStatus" /></th>
<th><spring:message code="fileInfo.feedbackName" /></th>
<th><spring:message code="fileInfo.feedbackDate" /></th>
<th><spring:message code="fileInfo.processDate" /></th>
<th><spring:message code="fileInfo.eventsAmount" /></th>
<th><spring:message code="fileInfo.goodEventsAmount" /></th>
<th><spring:message code="fileInfo.sourceId" /></th>
</tr>
</thead>
<!-- Footer Table -->
<tfoot>
<tr>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
This discussion has been closed.
Answers
The
idpart of this does not exist.var table = $('#fileInfoTable').DataTable(.....)assigns the Datatables API totableand there is not a DatatablesidAPI that I'm aware of.Otherwise It looks like your code should work. I copied portions of it to this example and it works:
http://live.datatables.net/jacivile/1/edit
Do you receive any alerts or errors in your browser's console when you click the
load databutton?What is returned from the server? Take a look at the response in the Network tab of your browser's developer tools.
Kevin