How to reload/refresh jQuery dataTable?

I am trying to implement functionality whereby clicking a button on the screen will cause my jQuery dataTable to refresh (as the server-side data source may have changed since the dataTable was created).

Here's what I have:

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

But when I run this, it does nothing. What's the proper way to refresh the dataTable when the button is clicked? Thanks in advance!

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

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

or just

$('#example').DataTable().ajax.reload();

http://datatables.net/reference/api/ajax.reload()

Destroy the datatable first and then draw the datatable.

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

You can try the following:

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "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();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

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

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

http://www.meadow.se/wordpress/?p=536

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

If you declare your datatable as DataTable() (new version) you need:

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

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

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

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

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:

var refreshedDataFromTheServer = getDataFromServer();

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

here is the source: https://datatables.net/reference/api/clear()

i would recommend using the following code.

table.ajax.reload(null, false); 

The reason for this, user paging will not be reset on reload.
Example:

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

detail about this can be found at Here

This simple answer worked for me

                  $('#my-datatable').DataTable().ajax.reload();

ref https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

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

If you want to add a reload/refresh button to DataTables 1.10 then use drawCallback.

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

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

Use this code ,when you want to refresh your datatable:

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });

Try destroy datatable first then setup it again, example

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});

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

HTML

<div id="my-datatable"></div>

jQuery

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.

If you use the url attribute, just do

table.ajax.reload()

Hopes it helps someone

well, you didn't show how/where you are loading the scripts, but to use the plug-in API functions, you have to include it in your page after you load the DataTables library but before you initialize the DataTable.

like this

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>

var myTable = $('#tblIdName').DataTable(); myTable.clear().rows.add(myTable.data).draw();

This worked for me without using ajax.

> Allan Jardine’s DataTables is a very powerful and slick jQuery plugin > for displaying tabular data. It has many features and can do most of > what you might want. One thing that’s curiously difficult though, is > how to refresh the contents in a simple way, so I for my own > reference, and possibly for the benefit of others as well, here’s a > complete example of one way if doing this:

HTML

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Javascript

function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "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);
});

Source

		if(data.length==0){
			alert("empty");
			  $('#MembershipTable > tbody').empty();
			// $('#MembershipTable').dataTable().fnDestroy();
	             	$('#MembershipTable_info').empty();	
					$("#MembershipTable_length").empty();
					$("#MembershipTable_paginate").empty();
			
			 html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
	       $("#MembershipTable").append(html);
		}
		
		else{
			 $('#MembershipTable').dataTable().fnDestroy();
			$('#MembershipTable > tbody').empty();
			
		 for(var i=0; i<data.length; i++){
			//

.......}

According to the DataTable help, I could done for my table. >I want wanted multiple database to my DataTable.
> >For example: data_1.json > 2500 records - data_2.json > 300 records - data_3.json > 10265 records

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });

if using datatable v1.10.12 then simply calling .draw() method and passing your required draw types ie full-reset, page then you will re-draw your dt with new data

let dt = $("#my-datatable").datatable()

// do some action

dt.draw('full-reset')

for more check out datatable docs

I had done something that relates to this... Below is a sample javascript with what you need. There is a demo on this here: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//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');
	}
}

you have to write this line of code after doing update operation.

$('#example').DataTable().ajax.reload();

For my case (DataTables 1.10.7) following code works for me;

let table = $(tableName).DataTable();
table.clear().draw();

$(tableName).dataTable({ ... });

Datatables clear(): Simply remove all rows of data from the table

Very Simple answer

$("#table_name").DataTable().ajax.reload(null, false); 

My table first call:

var myTable = $('.myTable').DataTable({
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.11.0/i18n/es_es.json"
    },
    dom: 'Bfrtip',
    processing: true,
    "paging": false
});

Your ajax call code here.

Then after the ajax result:

//Destroy my table
myTable.destroy();

//Place my table again
$("#tableWrapper").html(''+
    '<table class="table-striped myTable">'+
        '<thead>'+
            '<tr>'+
			    '<th>Title</th>'+
            '</tr>'+
	    '</thead>'+
	    '<tbody id="info_conds">'+
            '<td>Content</td>'+
	    '</tbody>'+
    '</table>'+
'');

Calling my table properties again

myTable = $('.myTable').DataTable({
    "language": {
        "url": "//cdn.datatables.net/plug-ins/1.11.0/i18n/es_es.json"
    },
    dom: 'Bfrtip',
    processing: true,
    "paging": false
});

Done.

    function autoRefresh(){
        table.ajax.reload(null,false); 
        alert('Refresh');//for test, uncomment
    }

    setInterval('autoRefresh()', 5000);	

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

eg.

TableAjax.init();
retrieve: true,