how to constantly update the datatables when records change in the database, a websockets or long polling implementation

Question

I am using datatables as my grid on a webapp. The problem is, the user has to refresh the page always to get the current data from the database,is there a way this can be done automatically? because several apps write to the same table and the webapp is just for monitoring,but it beats the purpose if the user has to refresh the page to get the current data. here is my initialization code:

  $('.{{datatable['class']}}').dataTable( {
                "sDom": 'T<"clear">lfrtip',
                "oTableTools": {
                    "sSwfPath": "includes/swf/copy_csv_xls_pdf.swf",                
                    "aButtons": [
                         { 
                             "sExtends":"copy",
                             "mColumns":[{{datatable['flds']}}]
                         },
                         {   
                             "sExtends":"csv",
                             "mColumns":[{{datatable['flds']}}]
                         },

                         {
                             "sExtends":"xls",
                             "mColumns":[{{datatable['flds']}}]
                         },                         
                         {
                            "sExtends": "pdf",
                            "mColumns":[{{datatable['flds']}}],
                            "sPdfOrientation": "landscape",
                            "sPdfMessage": "{{datatable['title']}}"
                         }
                    ]
                    },        
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "{{datatable['source']}}",
                "aoColumns": [          
                        {% for column in 0..datatable['columns']-2 %}
                        null,
                        {% endfor %}
                        null
                ]

        });

is there a way the list can be updating itself each time anything(UPDATE/INSERT/DELETE) happens to the datasource? i have implemented a loop as Danny suggested,

var int=self.setInterval(function(){oTable.fnDraw();},1000);

but the problem is that the list is always a funny state,see the attatched image

Answer 1

You could have an ajax request that happens on a loop by an interval timer that checks to see if there is new data since the page last received anything. You would need to figure out what you could use to determine that like number of records or a dedicated record that holds a datetime of the last update/add/delete and if the datetime is newer then when the data was last grabbed update it again etc. On the page you would record/update the datetime of the last data update in a javascript var to use on all future checks.