I am trying an application to fetch records from db and populate dataTable using the returned json. My app is working good but I want to refresh my table on every 30 seconds and to repopulated added/modified rows from db. Ajax reload is not working.. I need your suggestion to know where i am mistake.
Here is my code..
javascript file:
var table;
function submitData(){
alert('Method Called');
table=$('#table').dataTable({
"pagingType" : 'full_numbers',
"scrollY" : "200px",
"dom" : 'TRlfrCtip',
"colVis" : {
"activate" : "mouseover",
"restore" : "Restore"
},
"tableTools" : {
"aButtons" : ["copy","csv","xls","pdf","print"],
"sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"
},
"ajax" : {
"url" : '../DataTableExample/FetchRows',
"dataType" : "json",
"type" : "POST",
},
"aoColumns" : [ {
"mData" : "id",
"sTitle" : "S. No"
}, {
"mData" : "name",
"sTitle":"Name"
}, {
"mData" : "age",
"sTitle":"Age"
}, {
"mData" : "designation",
"sTitle":"Designation"
}, {
"mData" : "qualification",
"sTitle": "Qualification"
}, ],
"deferRender": true,
"columnDefs":[
{
"targets" : [0],
"visible" : false,
"searchable" : true
}
]
});
$('#table tbody').on('click','tr',function(){
$(this).toggleClass('selected');
});
setInterval( function () {
table.ajax.reload();
}, 30000 );
}
function hideThings(){
$('#table_length').css("display","none");
}
index.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DataTable Example</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColVis/css/dataTables.colVis.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/dataTables.colvis.jqueryui.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/media/css/dataTables.colVis.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColReorder/css/dataTables.colReorder.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/ColReorder/css/dataTables.colReorder.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.4/extensions/TableTools/css/dataTables.tableTools.css">
<!-- Custom Javascript File -->
<script type="text/javascript" charset="utf8" src="jsFiles/DataTableSamplejs.js"></script>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="jqueryFiles/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColVis/js/dataTables.colVis.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/ColVis/js/dataTables.colVis.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.4/media/js/jquery.dataTables.js"></script>
</head>
<body>
<input id="submit" type="submit" value="Submit" onclick="submitData()"/>
<table id="table" class="display" cellspacing="0" width="100%">
<tbody></tbody>
</table>
<input id="hideButton" type="submit" value="Hide" onclick="hideThings()"/>
</body>
</html>