CODEWITHSUNDEEP
javascriptjquerydatatables
user4259714
user4259714

Reputation:

DataTable autorefresh in every 30 seconds not working

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 making mistake?

Here is my code..

Datatable Script

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");
}

HTML

<%@ 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>

Upvotes: 2

Views: 9051

Answers (5)

Fco Javier Bal&#243;n
Fco Javier Bal&#243;n

Reputation: 455

Not necessary to destroy to reload the data. You can reload only the data

function reloadDatatable () {
    $('#example').DataTable().ajax.reload();
}; 
setInterval( reloadDatatable , 1000 );

Upvotes: 0

Stephen Ngethe
Stephen Ngethe

Reputation: 1044

This is how I do it fetch every 2 seconds

setTimeout(function(){  $('#table').DataTable().ajax.reload();  },2000);

no need to destroy just reload table.

Upvotes: 1

user4259714
user4259714

Reputation:

I got the solution..

I used event delegation to keep track on the column index in which sort performed and I applied it to "order" option dynamically using that variable. And as you guys suggested I changed ajax.reload to call setInterval(submitData,30000) and inside that function I destroyed the table if found. Its working as expected now..

Thank you all for your support :-)

Upvotes: 0

Rishi Prakash
Rishi Prakash

Reputation: 1789

OK 2 things,

One change 

setInterval( function () {
        table.ajax.reload();
    }, 30000 );

to 

setInterval( submitData , 30000 );

and 

table=$('#table').dataTable({
        "pagingType" : 'full_numbers',
         destroy: true,    //ADD DESTROY TRUE
.
.
.
..

Upvotes: 1

pmverma
pmverma

Reputation: 1703

The following code will reload the datatable every 30 second.

Change

setInterval( function () {
        table.ajax.reload();
    }, 30000 );

To

setInterval( submitData , 30000 );

Upvotes: 0

Related Questions