DataTable autorefresh in every 30 seconds not working
DataTable autorefresh in every 30 seconds not working
Ramprakash
Posts: 14Questions: 7Answers: 1
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>
This discussion has been closed.
Answers
Try capitalizing the D in DataTable here:
table=$('#table').dataTabletotable=$('#table').DataTable@ignignokt Thank you for the reply. But that too didn't worked. But I got solution to my problem.. Instead of ajax reload I call the same function to load table again but checking clearing table before initializing and saving sorting order, column index and navigation page number in seperate variables and using them while initializing the table..