Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


TableAjax.init();
retrieve: true,

reinitialise datatable with init and write retrieve as true ..done..so simple

Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


$('#example').DataTable()
$('#example').DataTable().ajax.reload();
$('#example').dataTable()
var table = $('#example').DataTable();
table.ajax.reload();

After I do this I cannot access the content of the datatable. It then says I only have 2 TR's (one with the headers, and one with only 1 cell displaying there is no data). Do I have to redraw it first?

This can throw an error cannot reinitialise datatable jquery. This happens because table was initialised again and again for each entry of the table. To avoid this, make sure you initialise table just once.

To preserve the paging info use. table.ajax.reload(null,false), as mentioned in official documentation here datatables.net/reference/api/ajax.reload()

With version 1.10.0 of DataTables, it is built-in and easy:

Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();

Destroy the data tablke and draw the datatable.

Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


$('#my-datatable').DataTable().ajax.reload();
Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

If you declare your datatable as dataTable() (old version) you need:

You could use an extensive API of DataTable to reload it by ajax.reload()

Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-std
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();

    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

  setTimeout(function(){AutoReload();}, 30000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  setTimeout(function(){AutoReload();}, 30000);
});

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

This is great! But I found you are calling the _fnAddData, which is supposed as a private function only. Is this risky? Let's say in the future the function signature might be changed.

You can try the following:

Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


var ref = $('#example').DataTable();
ref.ajax.reload();
var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}

See example below (I am using DataTables with bootstrap css)

Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


<div id="my-datatable"></div>
function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

Note: In my workings with jQuery dataTable, sometimes if you don't have <thead></thead><tbody></tbody> it doesn't work. But you might be able to get by without it. I haven't exactly figured out what makes it required and what doesn't.

This is how I do it... Maybe not the best way, but it's definitely simpler (IMHO) and doesn't require any additional plugins.

Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

I had the same problem, this is how i fixed it:

You My friend are my saviour...

first get the data with method of your choice, i use ajax after submitting results that will make change to the table. Then clear and add fresh data:

Note
Rectangle 27 0

javascript How to reloadrefresh jQuery dataTable?


//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
        // click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}
Note